Download to read offline
Uploaded byJohn Allan
HTML Basics 1 workshop
The document provides an overview of the basics of HTML, including its structure and key elements like tags, attributes, and nesting. It includes explanations of various HTML tags, their functions, and how they interact within a webpage, alongside practical activities using online editors to apply HTML knowledge. Resources for further learning and code generation are also provided.
More Related Content
HTML Basics 1 workshop
- 1. HTML Basics 1 1 AllanWicks2015 WorkshopDescription HTML Basics Part 1: The workshop facilitator will introduce participants to the basic building blocks of HTML. Elements such as page framework and individual items will be introduced. The goal is to have participants identify the parts of an HTML document. Understanding basic HTML elements will allow instructors troubleshooting ability with their D2L pages. What is HTML? HTML stands for Hyper Text Markup Language HTML is a set of tags for describing (marking up) web documents (web pages). Each HTML tag defines specific appearance or function of document content Tag Examples: <em> to show text emphasis <p> define a paragraph of text <a> represents a hyperlink (anchor element) <img> embeds an image in an HTML document HTML Tags Tags are the building blocks of an HTML document. Tags are keywords surrounded by angle brackets. <center> HTML tags are commonly in pairs <p> and </p> The first tag in a pair is the opening tag <p> The second tag or closing tag is written with a forward slash before the tag name </p> An element usually has an opening and closing tag. (There are a few exceptions.) <tagname>content</tagname> HTML Tag Resources A basic list of HTML tags can be found at http://abt.cm/1Dlxdqb An HTML 5 list can be found at http://abt.cm/1JZ80us
- 2. HTML Basics 1 2 AllanWicks2015 Partsof an HTML document The DOCTYPE declaration defines the document type to be HTML The text & tags between <html> and </html> define an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> defines a heading The text between <p> and </p> defines a paragraph Parts of an HTML document in HTML
- 3. HTML Basics 1 3 AllanWicks2015 TheHTML document as it appears in a browser HTML Document in D2L Note that the parts of a D2L HTML documentfollow the same structure.
- 4. HTML Basics 1 4 AllanWicks2015 TagNesting Notice that tags pairs appear nested in relation to other nested pairs as in the structure above. <html> <head> <title> </title> </head> <body> <h1> </h1> <p> </p> </body> </html>
- 5. HTML Basics 1 5 AllanWicks2015 HTMLTag Activity - basic tags Open the resource http://htmledit.squarefree.com/ Note: This is a real-time HTML editor. The data is entered into the top section and the results appear below. 1. In the top section of this page, delete all of the text, Look at the bottom section of the page (it should appear empty) 2. In the top section of this page, type This is a Page TitleParagraph HeadingThis is a simple sentence. HTML is a markup language. This text is a paragraph. 3. Look at the bottom section (it appears exactly as the top section) 4. Insert title tags as below. <title>This is a Page Title</title> Paragraph HeadingThis is a simple sentence. HTML is a markup language. This text is a paragraph. 5. In the bottom frame the title text should disappear. 6. Insert paragraph tags as below. <title>This is a Page Title</title> Paragraph Heading<p>This is a simple sentence. HTML is a markup language. This text is a paragraph. </p> 7. Not much of a difference as the text is included in one paragraph 8. Insert strong tags as below. <title>This is a Page Title</title>Paragraph Heading<p>This is a simple sentence. <strong>HTML is a markup language. </strong> This text is a paragraph.</p> 9. The sentence HTML is a markup language. Should appear bold. 10.Insert em tags and h2 as below. (emphasis & heading) <title>This is a Page Title</title><h2>Paragraph Heading</h2><p><em>This is a simple sentence. </em> <strong>HTML is a markup language. </strong> This text is a paragraph.</p> 11.This is a simple sentence. Should appear italicized. 12.Close the browser
- 6. HTML Basics 1 6 AllanWicks2015 HTMLTag Activity - more tags Open the resource http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default Note: This is a real-time HTML sandbox editor. The data is entered into the left section and the results appear on the right. 1. The basic structure of an HTML document appears in on the left. 2. Change the Page title to My Web Page 3. Click on the button See Result>> 4. Note: Nothing occurs to the result as the title appears in the browser title bar 5. In the left panel, click within the <h1> and </h1> tags 6. Change the text to My First Heading 7. Click on the button See Result>> 8. Note: the heading on the right side is changed 9. In the left panel, click after the </h1> tag 10.Press the Enter key 11.Type <h2>This is a sub-heading</h2> 12.Click on the button See Result>> 13.Note: a sub-heading appears 14.In the left panel, copy the line <p>This is a paragraph. </p> 15.Click after the </p> tag 16.Press Enter 17.Paste the copied content here 18.Click on the button See Result>> 19.Note: a paragraph appears here
- 7. HTML Basics 1 7 AllanWicks2015 Attributes Attributesprovide additional information about HTML tags. Attributes are normally stated in the opening tag. Three key attributes are size, src and href. The anchor tag and the href attribute The <a> tag defines a hyperlink. <a> </a> It has an attribute href <a href=""> </a> The URL or web address is inserted in between the quotation marks <a href="http://www.cbc.ca"> </a> The visible text is inserted in between the angled brackets > < <a href="http://www.cbc.ca">Visit CBC Online!</a>
- 8. HTML Basics 1 8 AllanWicks2015 Theimage tag and attributes The <img> tag defines a hyperlink. <img> </img> It has an attribute src <img src=""> The file name is inserted in between the quotation marks. <img src="smileyface.jpg"> Height and width attributes are added between the “ and the > <img src="smileyface.jpg" height="42" width="42">
- 9. HTML Basics 1 9 AllanWicks2015 Openingthe HTML Editor in D2L 1. Open your Sandbox course on D2L (your name) 2. Click on CONTENT (in the navigation bar) 3. Click on the New button 4. Click Create a File 5. In the bottom right corner of the editor, click on the HTML Source Editor icon 6. The HTML Source Editor opens 7. Now what? 8. Insert HTML tags, attributes and documentdata 9. Click on Save Possibly get some help from: HTML Snippets Generator http://www.blindtextgenerator.com/snippets W3schools HTML snippets http://www.w3schools.com/html/html_basic.asp HTML code Generator http://www.quackit.com/html/html_generators/html_code_generator.cfm
- 10. HTML Basics 1 10 AllanWicks2015 ExcellentBasic HTML resources HTML Tags listing http://www.quackit.com/html_5/tags W3schools http://www.w3schools.com/html/html_intro.asp Web Source HTML codes http://www.web-source.net/html_codes_chart.htm#.VOr-yU0cS-U Lynda.com course HTML Essential Training with James Williamson The QuackIt online HTML Editor http://www.quackit.com/html/online-html-editor/ Realtime HTML editor http://htmledit.squarefree.com/ Yet another online real-time HTML editor http://www.onlinehtmleditor.net/