Scribd
Upload
2 views

Coding!!

This document provides step-by-step instructions for creating a simple HTML web page using TextEdit. It covers the essential HTML structure, including the <html>, <body>, and <head> tags, as well as adding text, images, and basic formatting. The guide concludes with instructions on saving the file and opening it in a web browser to view the created web page.

Uploaded by

cheyanne.brady
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
2 views

Coding!!

This document provides step-by-step instructions for creating a simple HTML web page using TextEdit. It covers the essential HTML structure, including the <html>, <body>, and <head> tags, as well as adding text, images, and basic formatting. The guide concludes with instructions on saving the file and opening it in a web browser to view the created web page.

Uploaded by

cheyanne.brady
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 3

1.

Open TextEdit

2. Convert fill to Plain Text (Format>Make Plain Text). This will allow you to design the
code by hand. If you choose "HTML" from the format menu, you are not working with
the html code, you are simply using the text editor to write your HTML for you.

3. Save as mywebpage.html This will allow the text document to be read as a web
page by a web browser.

4. Type in the following text:

<html>

</html>

This establishes the document as an HTML document.

5. Between the two tags already on the page, type:

<body>

</body>

This is where everything that will be visible on the web page will be placed (until we
start developing CSS code for the page)

6. Between the two body tags, type:

<p>
Hello!
</p>

7. Save the file and open using your web browser. You have built your first web page by
hand!

8. Notice that at the top of the web page the name is "untitled".

Go to your html document and type in the following between the <html> and <body>
tag:

<head>
<title>My Web Page</title>
</head>

9. Save and preview your document. The web page has a name.
10. To add in a picture. within the body tag type:

<img src="images/main-page-veyron.jpg">

11. View the web page.

12. Let's add in some page properties. In HTML we can give the page some design
properties. WIthin the body tag type:

<body bgcolor="#000000">

Don't forget the quotes and the pound sign.

13. Save and view your web page. We can't read the text any more so add into the
same tag:

<body bgcolor="#000000" text="#999999">

14. properties in the body tag define the defaults for the web page but we can change
the color on a local level. After the image type:

<p>
<font color="#ffffff">This is some brighter text</font>
</p>

15. We can even change the standard body copy from roman to italic.

add in <em> before the word brighter and </em> after the word brighter.

16. There are other ways to format text in a web page. Above the "Hello" type:

<h1> and after type </h1> after the word.

17. View web page.

18. Below the text at the bottom of the page type in:

<h1>This is Header 1</h1>


<h2>This is Header 2</h2>
<h3>This is Header 3</h3>
<h4>This is Header 4</h4>
<h5>This is Header 5</h5>
<h6>This is Header 1</h6>

19. Before the H1 tag type:


<font color="#ff3366"> and </font> after

20. Below header 1, type the following:

<p>I would like to share something fun about me: I like to brew beer and even though it
tastes worse than ABC-branded beer I enjoy drinking it. I think I will have a lot of fun
when I start to understand what I am doing. </p>

<p>I have been at Ai Jacksonville for 6 years.</p>

21. Save and quit.

22. Double-click the file. It opens as a web page. In order to get the text back to
workable. Right-click the file and open in Dreamweaver. Switch to Code View and copy
the text. Create new TextEdit file and set it to Plain Text. Paste in to TextEdit file.

You might also like