HTML is a markup language that is used to create and design websites. The structure of HTML is simple, it consists of elements (such as tags) that interacts with the browser on how to display its’ contents. Learn more below!
Creating an HTML Document
Hello World! Let us create our first document. Go on the text editor that you use. It should be blank and type in <!DOCTYPE html>. On a new line, type in <body>. This is where your html webpage will display what you want to say. On the next line, Include the <p> for the paragraph tag. Then type in what you want to say.
The tag, “<!DOCTYPE html> tells the server that this file is now going to create an html document. The tag, “<body>” is what the file then reads in your document to know that this is what is going to output into the webpage. The tag, “<p>” is a paragraph tag that just resembles one of the two main tags you can use for body. It’s just your standard paragraph tag with normal sized font.
Make sure that for each tag you open, to close them. </>
Finally, lets save our created document as “whateverfilenameyouchoose.html”. Then open up your document to see your creation!
Action Steps: Go ahead and create a webpage like the second picture shown directly above. Good Luck!
HTML Elements and Attributes
This will be the only time I ask you to visit outside links to learn. It’s because these links are extremely helpful and they do a great job explaining some of the important aspects to HTML and what it truly is. In fact, when I first started studying for TP, these links were the first and only learning “modules” I read that was helpful for this course.
Action steps: Visit each link and thoroughly go over them. It should not take too long, and trust me this will benefit you for the rest of the semester! Major key alert.
Table < table >
To create tables in HTML:
<table> – creates the table
<tr> – creates the table row within the table
<td> – creates the table cell/column within the row
</td> </tr> </table> – closes the cell, row, and table respectively.
Action Steps: Go ahead and work on the 2 practice examples below for tables.
Practice Table 1:
Create a table that will show this:
Create a table showing this:
<table border =’1′>
<td> Cars </td>
<td> Lightning </td>
<td> Mcqueen </td>
<td> Monsters Inc </td>
<td> Bigby </td>
<td> Baseball </td>
Break Tag (br)
The Break Tag, <br>
is an html tag that breaks the line to result into a new line. If you took JAVA, the <br>
is very similar to \n. It creates a new line. Below is an example of the break tag in action.
Action Steps: Break tag is simple to understand. Just do the one practice problem below and your set.
Practice br tag 1:
Write the statement below that will show this:
Image Tag < img >
The image tag is defined as,
“<img src = ‘insert source’ width = ‘insert width size’ height = ‘insert height size’>”.
The img tag is used to display pictures on webpages.
The ‘insert source’ has to be a name that can be located in your folder.. i.e. the filename of the pic for example (graduationpic.jpg) is a saved picture in your folders. That way the computer can locate the source name in your local files and display the picture.
The width and height size just has to be a number. It specifies how wide or tall the picture can be.
Notice the values for both the src and height/width have to have quotes inside them. This will always be the case for HTML tag attributes. all values have to have single quotes on them. so width = ’50’ is correct but width = 50 is not.
Image Demonstration (video format)
Practice Img Tag 1:
Google “Graduation Bear Kanye jpg” and pick any image. Save that image into your folder. Make sure it is saved in the same file path (whether downloads or documents) as your text editor. Name it as “gradbear.jpg”. Finally, create an image like the picture below with width 150 and height 200.