Download presentation
Presentation is loading. Please wait.
1
HTML Basics Web
2
HTML • Hypertext Markup Language
• Uses tags to modify text files for display on the World Wide Web. • Uses suffixes (.htm) or (.html) • Standards are set by the World Wide Web Consortium
3
Structure of an HTML page
• Pages are created using a series of tags that surround the page’s content. • Tags are placed in “less than” and “more than” symbols, with the closing tag also including a “forward slash.” <tagname>Content goes here.</tagname>
4
Structure of an HTML page (cont.)
• The basic structure of a Web page (note that tags sometimes appear inside other tags): <html> <head><title></title></head> <body></body> </html>
5
Tags • Most HTML tags can have attributes, and those attributes can have their own values: <html lang=en> In this example, the tag specifies this is an HTML document and that the content is in the English language. tag attribute value
6
Common tags • <h1> - <h6> — define HTML headings
• <br> — create a line break • <p> — create a paragraph • <b> — make text bold • <i> — make text italic • <a> — make a hyperlink • <img> — insert an image
7
Your first Web page <!doctype html> <html lang=en>
<head> <title>My first Web page</title> </head> <body> <p>Hello, world!</p> </body> </html>
8
Practice Using an HTML editor or the “Try it yourself” feature on try to re-create this HTML page:
9
Practice
10
Practice <!doctype html> <html lang=en> <head>
<title>Learning HTML</title> </head> <body> <h1>Hello, world!</h1> <p>I'm <i>beginning</i> to learn <b>HTML.</b></p> </body> </html>
11
Adding images <img src=“images/paperclip.jpg”>
In this example, the value shows the “path” of the image “paperclip.jpg” in the folder “images”
12
Adding links <a href=“more.html”>This is a link for more information.</a> This is called a “relative” link, because it shows where the link is in relation to the document being viewed. <a href=“ is a link to JEA.</a> This is called a “direct” link, because it shows the full path to the link. Note the “http” in the direct link. <a href=“ is a link to JEA.</a> This link would not work. Because it is missing “http,” the browser would think this is a “relative” link instead of a direct link.
Similar presentations
