HTML Basics 1 workshop
•Download as DOCX, PDF•
1 like•532 views
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 Desire2Learn. pages.
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to HTML Basics 1 workshop
Similar to HTML Basics 1 workshop (20)
More from John Allan
More from John Allan (20)
Recently uploaded
Recently uploaded (20)
HTML Basics 1 workshop
- 1. HTML Basics 1 1 AllanWicks2015 Workshop Description 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 Parts of 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 The HTML 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 Tag Nesting 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 HTML Tag 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 HTML Tag 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 Attributes provide 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 The image 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 Opening the 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 Excellent Basic 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/