More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Basics of Html
Similar to Basics of Html (20)
Recently uploaded
Recently uploaded (20)
Basics of Html
- 2. What does HTML Stand for? • Hyper • Text • Markup • Language
- 3. Is HTML a programming language? (That’s a No.)
- 4. What is it then? Unlike with a programming language, all you can do with HTML is format information. In this sense, you use HTML for layout tasks. To cover this weakness, HTML coders use other languages, like Javascript, to do complex tasks that require programming. So do you program in HTML? HTML is a formatting language. No. You write HTML code. (I.E. you code HTML)
- 5. How does HTML work? • Since all HTML can do is manage the layout of information, it’s not that hard to use. • An HTML document has two kinds of information in it • Information (Text, etc.) • HTML code to format that information
- 6. So what is HTML code like? HTML is a tag-based language. That means that HTML code is made out of little pieces, called tags, with a particular structure. They surround information that they manipulate. Generally, if you have an HTML tag called TAGX, it consists of two parts: • An opening tag, <TAGX> • A closing tag, </TAGX>
- 7. How do these tags work? The tags surround a piece of information that they are designed to have a formatting effect on. For example, if we have a piece of text, “I like to paint xylophones while flying a hang glider.” and we want to make it bold, we can use an HTML tag, <b> to do this. <b> I like to paint xylophones while flying a hang glider.</b> shows up like this in a browser: I like to paint xylophones while flying a hang glider.
- 8. Notice that in our previous example, all of the text was inside of the bold tags, <b> I like to paint xylophones while flying a hang glider.</b> meaning that all of it was put into bold. If I only wanted to bold part of it, however, I could put only part of it inside the tags, like this. I like to paint <b>xylophones </b> while flying a hang glider. This would produce: I like to paint xylophones while flying a hang glider.
- 9. Basic Tags The most basic tag is the <html> tag. This tag appears at the beginning of every HTML document (.html or .htm) and the corresponding closing tag, </html>, appears at the end of every HTML document. So so far we have: <html> ***some HTML code and information*** </html>
- 10. Basic Tags pt 2 Every HTML document is divided into 2 parts: a head and a body. The head contains information about the document, like the title, and the body contains most of the actual code and information. The tags are: <head> and <body>. So so far we have: <html> <head>***HTML code and information***</head> <body> ***HTML code and information*** </body> </html>
- 11. <head> Inside the <head> tags you can put a lot of different tags and information, but for now we’ll only worry about one thing: the <title> tag. This tag allows you to specify the text that appears at the top of the browser window. <html> <head> <title> My Happy Page </title> ***more HTML code and information*** </head> …etc
- 12. <body> Things that go inside of the body tags include: •Text •Images •Links •Multimedia and such. Let’s focus on text for now.
- 13. Text-related Tags The first text-related tag we’ll look at is a header tag. Header tags are used to mark text that heads a section, usually by making it larger. We’ll start with the largest one, <h1>. Try adding <h1> Some Text </h1> into the body of your document, like this: …. <body> <h1> Some Text </h1> </body> </html>
- 14. Text-related Tags pt 2 Header tags come in several sizes, from <h1> down to <h6>. Try changing the tag to <h3> and comparing the size. <html> <head> <title> … </title> </head> <body> <h3> Some Text </h3> </body> </html> An additional benefit of header tags is that they add a line break.
- 15. Text-related Tags pt 3 We’d like to add several lines of text. To do this we just type the text, like this: <html> <head> <title> … </title> </head> <body> <h1> Some Text </h1> This is line 1 of the text. This is line 2 of the text. </body> </html> What’s the problem with this?
- 16. Text-related Tags pt 4 The two lines of text are run together. We’d like to put text on a new line. The solution? The <br> tag. <br> stands for break, as in line break. <br> is also an exception in that it doesn’t have a closing tag. <html> <head> <title> … </title> </head> <body> <h1> Some Text </h1> This is line 1 of the text. <br>This is line 2 of the text. </body> </html>
- 17. Text-related Tags pt 5 What if we have a lot of text in separate paragraphs? Should we just use a lot of <br> s? Well, we could…. But what we should really use is the paragraph tag, <p>. The paragraph tag is roughly equivalent to 2 <br> s, and it has a closing tag, </p> <p> Paragraph 1 </p> <p> Paragraph 2 </p>
- 18. Text-related Tags pt 6 So now we have text nicely formatted into paragraphs. What if we want to emphasize some of it by underlining, italicizing, or bolding it? Well, we’ve already seen the bold tag, <b>. Similarly, <i> is the tag for italics and <u> is the tag for underlining. All three of these can be used at once if you want, or just by themselves. This <u>sentence is <i>way <b>confusing</b></i>. </u> shows up as: This sentence is way confusing.
- 19. <html> <head> <title> That’s it for now. </title> </head> <body> <p>But more later!</p> </body> </html>