Creating+Your+First+HTML+File



Ready to try your hand at coding in HTML? Don't worry; we will take it slow and I'll try my best to break it down for you.

First off, you will need to open your computer's text editor. In Microsoft Windows it is called Notepad. In Mac computers it is called TextEdit. One thing you should know is if you are using TextEdit then you must first click on Format on the top menu bar and select Make Plain Text. If this is not done then all your coding will not work.

**Laying Down the Foundation**

Now that you have your text editor open let's get coding! In order to create a web page we need to speak in a language that web browsers understand. Our first order of business is to tell our web browser, "Hello!" The following code is essentially how to say hello in XHTML: code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> code

You will have to always start with this code whenever you are writing an HTML file.

Now it's time to begin building the structure of our page. Under the code we just entered, add the following:

code

code The start-tag tells our browser that we want to start a document while the end-tag tells our browser we want to end our document.

Now before we start putting in some content we need to tell the browser we are now going to work within the body of the document. Insert the following code __in between__ and. Your document should look like this so far.

code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

code


 * Now Time For Some Fun! **

We can finally begin painting our blank canvas. How about we start with an eye-popping heading. Between the body tags let's add the following text: code Welcome to (Your Name)'s First Web Page! code The h1 tag set tell our browser that this is our top level heading in our page. Right now it is also our only heading. (In future lessons we will create pages with multiple headings.)

Now let's add a sentence or two. Directly under your heading code input the following:

code I am learning a lot in my Introduction to Web Design Class. Today I learned the following: code

The p tag tells your browser that you want the text to come out in a paragraph format.

At this point it seems like a good time to enter a list. Under your paragraph code input the following:

code  Text Editors Laying Down the Foundation of a Website Basic HTML Tags Basic HTML Coding

code
 * Saving the Document **

Now it's time to transform this code into a webpage. To keep yourself organized I recommend creating a folder to keep all your html files in. Now let's click on File and Save it as myfirstpage.txt. //It is important that you do not use capital letters or spaces when naming HTML files.// Now let's click on File again and Save as (or if you are using a Mac click on Duplicate). Now this time let's save it as an HTML. To do that, rename the file myfirstpage.html in the **File Name:** field. You will also have to change the **Save as Type:** drop down menu selection to **All Files (*.*)**. This is how to convert the .txt file to an .html file. Now hit the **Save** button.

**Viewing your** **HTML**

Now open the folder with the myfirstpage.html file and click on it. If you were able to follow these directions step by step your file should open in a web browser just like this:



Hope this was helpful!

-Mr. Mendonez