Introducing HTML Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This presentation introduces HTML tags which are used to control the appearance of Web pages. We’ll define hypertext and markup and see how to create a simple HTML page using a text editor. This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
Where does this topic fit? Internet concepts Applications Technology Implications Internet skills Application development (web) Content creation User skills We introduce some Web concepts and Web development skills.
hypertext markup language HTML hypertext markup language HTML stands for hypertext markup language, though it is not a language in the conventional sense. Let’s look at the parts of the name separately, starting with “hypertext.”
Hypertext . . . Hypertext: Linear text: Table of contents Chapter 1 1 A hypertext has embedded links, and you can jump from page to page by clicking on a link. We can contrast that to a conventional linear text, like a book or magazine article. A linear text is intended to be read from page one to page two and so forth to the end. You could think of the World Wide Web as a huge hypertext with trillions of linked pages. That explains the “hypertext” in HTML, what about the term “markup?” . . .
Markup – adding tags to control appearance This word is bold. This <b>word</b> is bold. When we mark up an HTML page, we add tags to control its appearance. Here we began with the sentence “this word is bold.” Next we added the tag <b> and </b> to our original sentence. When the page is displayed by a Web client program, everything between the <b> and the </b> is boldface.
Examples of HTML tags Tag Effect <h1> … </h1> large heading <h2> … </h2> smaller heading <p> … </p> paragraph <b> … </b> bold text <i> … </i> italicized text <u> … </u> underlined text Here are some of the HTML tags. As you see, these each begin with a <tag> and end with </tag>. They mark the beginning and end of the text effects. But, some tags do not require a start and end. Let’s look at a couple of them. What do you suppose the command to bre ak a line (like I just did) is?
Examples of HTML tags Tag Effect <hr /> draw a horizontal line (a rule) across the window <br /> force a break in the line being typed These tags are different. By their nature, they don’t require a start and an end tag. We just use them to indicate where a line break or a horizontal line should occur in the page. Note that HTML changes over time. The current version is HTML 4, but the HTML 5 standard is being defined now. The trailing “ /” is optional in HTML 4, but mandatory in HTML 5.
HTML tags control appearance, not content As we’ve seen in our earlier example and here, adding tags to a page does not change its content, just its format. Each of these pages has the same words, but they differ in appearance. The top page had no HTML tags added to it. For the second one, I added tags to change the color of parts of the text. In the third, I added more tags to change the layout of the page on the screen.
HTML tags These are the HTML 4 tags. <!--...--> <cite> <h3> <menu> <strong> <!doctype> <code> <h4> <meta> <style> <a> <col> <h5> <noframes> <sub> <abbr> <colgroup> <h6> <noscript> <sup> <acronym> <dd> <head> <object> <table> <address> <del> <hr> <ol> <tbody> <applet> <dfn> <html> <optgroup> <td> <area> <dir> <i> <option> <textarea> <b> <div> <iframe> <p> <tfoot> <base> <dl> <img> <param> <th> <basefont> <dt> <input> <pre> <thead> <bdo> <em> <ins> <q> <title> <big> <fieldset> <isindex> <s> <tr> <blockquote> <font> <kbd> <samp> <tt> <body> <form> <label> <script> <u> <br> <frame> <legend> <select> <ul> <button> <frameset> <li> <small> <var> <caption> <h1> <link> <span> <center> <h2> <map> <strike> These are the HTML 4 tags. There are too many to memorize, unless you become a professional Web developer. So you need a good reference.
W3schools make changes on the left side see the result on the right side The W3schools Web site has a complete HTML 4 and 5 reference and online tutorials. It also has a handy tool for learning what a particular tag does. As shown here, you enter an HTML snippet in the left pane. When you click the button at the top left, the result will be rendered in the pane on the right. Can you see what the <h1> tag does? Remember that this is just a learning tool – you cannot actually build Web sites using this tool, but you could copy snippets of HTML from W3schools to a page you were working on. http://www.w3schools.com/Html/
Codeacademy course on HTML and CSS Codeacademy offers a similar course and tag tester. Try both to see which you like both.
Steps to create a Web page Write page content using a text editor Add tags Save page View page using a Web browser Correct any errors Using an ASCII text editor, write the page content and add tags. You must use a plain text editor like Notepad, not a word processor. Save the page, and view it using a Web browser. Correct any errors and check the result using the browser.
Text editor versus word processor This is one sentence. You must compose your HTML pages using a text editor like Microsoft Notepad, not a word processor like Microsoft Word. A text editor stores only the characters you type, one character per byte using a standard character code. A word processor stores a lot of other things like the font and font size used, the size of page margins, whether the text is in the body of the page or a footnote, and so forth. Here we contrast a simple text file with a one sentence Word file. A Web client expects standard text characters in an HTML page. A Web browser would not be able to display a Word file.
All programs > Accessories > Notepad Which text editor? All programs > Accessories > Notepad There are many text editors. Notepad is included with Windows, and is accessed as shown above. You can use it or any other text editor to create HTML files. Regardless of which text editor you use, be sure to save your HTML files with the extension htm or html. If you are using Notepad, be sure to select all files, not txt as the file type. If you accidentally use .txt, your file will end up with the name xxx.html.txt and will not work. I use an editor called Textpad because it can show line numbers, has a spell checker and I am used to it.
To display the HTML source Chrome: Ctrl + U FireFox: Ctrl + U Internet Explorer: Ctrl + F3 You can view the HTML for a page using these shortcuts. You can see how a page you are looking at was marked up using the view source command for your Web browser.
Structure of an HTML page HTML page structure Structure of an HTML page <html> <head> <title>Page title goes here.</title> </head> <body> The body of the page goes here. </body> </html> Every HTML page has a head and body section. The <head> and </head> tags start and end the head section. The <body> and </body> tags start and end the body section. The bulk of the Web page goes in the body section. The head section contains information about the page, like its title. Let’s create a Web page.
Summary We’ve seen that the Web is a hypertext – many interlinked pages. We covered the basics of HTML, in which tags are added to pages to control their appearance when displayed in a browser. We also saw how to create and debug pages using a text editor. You should be able to create simple HTML pages on your own at this point.
Self-study questions What happens if you accidentally leave the closing tag </b> off of a bold-face portion of text? What happens if you accidently misspell the <b> tag as <bx>? How would you make some text both bold face and italicized? What does the <hr /> tag do? What happens if you leave out the </h2> at the end of a heading? What happens if you accidentally leave the "<" off of a tag? Does it matter if tags are in upper case or lower case? We introduced several HTML tags that altered the appearance of the page in this presentation. Do you recall what they were and what each does? An HTML page has two sections, what are they and what tags are used to start and end them? What tags start and end an entire HTML page? What are some of the other tags shown at w3schools, and what are their functions? The HTML standard has been revised several times, but Web authors don’t have to go back and change all of their old pages when a new standard is published. Why not? What does have to be changed when the HTML standard is revised?
Resources W3schools HTML reference and tutorial: http://www.w3schools.com/Html/ HTML & CSS for Beginners http://www.codecademy.com/tracks/htmlcss Free text editors: http://www.techsupportalert.com/best-free-text-editor.htm