INFO1217 Web Design Introduction to HTML Introduction to Web Design • There are 3 core languages in web design • html • css • javascript • Learning them is essential if you want to work in web development • HTML defines the structure of the page and is the foundation of any website • CSS controls the formatting of the page • Javascript controls the behavior of the page HTML • Hypertext Markup Language • Semantic Markup language, markup that describes the content and how it relates to other content on the page through the use of tags • Syntax that makes sense to humans and programs • Allows us to add hypertext links to images and sites and pages within our site • Universal, any platform can view page in HTML • Just a simple text file History of HTML • 1994 - W3C (World Wide Web Consortium), formed by Tim Berners-Lee to develop web standards accessible to all and ensure the continued growth of the Web. • 1991 – HTML • 1995 – HTML 2 • 1997 – HTML 3 • 1999 – HTML 4 • 2000 – XHTML 1.0 • 2012 – HTML 5 current recommendation • Complete specifications published late 2014 • Current version 5.2 issued 2017 HTML • HTML 5 syntax is very forgiving • Case insensitive names for elements and attributes • Closing tags not required • Quotes around attributes not required • These coding practices were included in the specification to ensures future browsers would continue to render as many pages as possible But…it is considered good code practice to follow the previously recommended rules of XHTML 1.0 …… HTML •XHTML 1.0 Strict had 4 rules • Close all tags • All tags must be in lowercase • All attributes must be in quotes • All tags should be properly nested Creating our First Web Page • Create the page in a text editor: notepad, VSCode etc. • Save every page with .html extension • The home or main page should always be index.html • Make sure to create a new folder for each new project/example you work on. (If you continue working in same folder you will soon be overwriting your index.html files.) • In this course you will be downloading files each class. Make sure to create new folders for each class… for week 1 class 1 folder name: w1c1 week 1 class 2 folder name: w1c2 week 2 class 1 folder name: w2c1 etc. What is HTML? • Webpage is made up of HTML Elements • Elements contain Tags that surround plain text and tells browser what type of element it is or how to display it • Some tags have opening and closing tags <title> My First Web Site </title> <h1> Welcome to My First Web Page </h1> • Some tags are single tags (do not require closing tag) <br> - tells browser to insert a line break <hr> - tells browser to insert a horizontal line Creating HTML Pages • There are 4 main parts to every page 1. <!doctype html> - tells browser what version of html is used 2. <html> - contains all the html code 3. <head> - The head contains information about the page, not viewable in the browser such as: • the website title: • the Title tag which is used by search engines and when bookmarking, it appears at top of page in browser title bar • links: • set up links to scripts and css files • meta tags: • meta tags are used by search engines for ranking purposes • And… Creating HTML Pages 4. <body> - the body contains all the tags, content and links that we see in the browser • All pages consist of three things: • Content or text • Tags - tell browser how to render the page • Links - to images, pages and other sites HTML Element • Tag includes: • Opening & Closing bracket ( < and > ) • tag names • Attribute name and values • Tag content is enclosed between Opening & Closing tags • Complete Tag is an HTML Element HTML Element Element Attribute Attribute name Attribute value <a href=“index.html”>My Home Page</a> Opening Tag Enclosed tag content Closing tag Commonly Used Elements • <html> - contains the html code • <head> - opens the head of the document • <title> - appears at top of browser • <body> - opens the body • <div> - divides the page up into a sections • <h1> - heading – from h1 to h6 • <p> - creates a paragraph element • <a href…> - creates a link • <img src=“file.jpg”…. > - displays an image More commonly used Elements • <span> - a selection of text inline • <br> - line break • <hr> - a horizontal rule or line • <strong> OR <b> - bolds text • <em> OR <i> - italicizes text • <ul> - opens an unordered list • <ol> - ordered list • <li> - creates a list item Elements new in HTML 5 • <main> - used where you would have used <div id=“main”>, should not contain any content repeated on each document, can only be used once on a page • <header> - a container for group of introductory content like h1 to h6, logos or icons or navigational links – can use more than once • <footer> - footer of a document, typically contains contact info, copyright, links to related documents etc – can use more than once • <nav> - for set of navigation links, only major blocks • <section> - defines a section of content within the page • <aside> - sidebars, could be considered separate from main content • <article> - independent, self-contained content, should make sense on its own, can be distributed independently from rest of site • <figure> - self contained content like images, illustrations, code snipits Why HTML5 Elements? • With HTML4, developers used their own favorite attribute names to style page elements using the <div> element: • id names like: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ... Example: <div id=“header”> • This made it impossible for search engines to identify the content correctly on web pages and difficult to display properly in a browser. • With HTML5 elements like: <header> <footer> <nav> <section> <article>, this is much easier, • the webpages render properly • search engines locate data properly Migration HTML4 to HTML5 Typical in HTML4 Now in HTML5 <div id="header"> <header> <div id="menu"> <nav> <div id="content"> <section> <div id="post"> <article> <div id="footer"> <footer> Elements on Webpage http://smashinghub.com/8-superlative-practices-for-efficient-html5-coding.htm Example Tells what version of html Non visual content of page Visual content, what we see in browser Example From <title> tag From <body> tag Nesting • Some tags can contain other tags, this is called nesting elements • For example, a paragraph element can include a nested element that makes the text inside it bold (see below): <p>This is a paragraph of text. <strong>This text is bolded. </strong> This is the end of the paragraph</p> • The <p> element would be the parent element and the <strong> element would be the child. • If you open a child element you MUST close that child before you close the parent <p>…<strong>…</p>…</strong> - WRONG <p>…<strong>…</strong>…</p> - CORRECT HTML Lists • The <ul> and <ol> tags create unordered lists and ordered lists respectively. • Starts with a <ul> or <ol> tag followed by the items in the list, used by HTML as the <li> tags • Example: <ul> <li>First item</li> <li>Second item </li> </ul> Images In HTML • <img src=“./images/smiley.gif" alt="Smiley face" width="900" height=“300” /> • src (destination URL of the image file) • alt (description tag, useful for defining an image and for accessibility use and search engine optimization, SEO) • Width and Height values (not required anymore – can set in CSS for more responsive layout) HTML Hyperlinks (Links) • A Hyperlink can be text or an image • HTML Text Link Syntax <a href="http://www.fanshawec.ca/">Visit My Site</a> • HTML Image Link Syntax <a href="http://www.fanshawec.ca/"> <img src=“pic.gif” …. /></a> HTML Hyperlinks (Links) • The target Attribute • The target attribute specifies where to open the linked document. <a href="http://mywebsite.com/" target="_blank">Visit My Site</a> • The target attribute values can be: • • • • _self _blank _parent _top - Opens in current browser window/tab - Opens document in new window/tab - Opens document in the parent frame - Opens document in new window outside of any frame HTML Hyperlinks (Links) • Email Linking <a href="mailto:someone@example.com">Send Mail</a> • Telephone Link (allows for computer AND mobile users to click and call) <a href="tel:5191234567">Call us</a> or <a href="tel:5191234567">519-123-4567</a> HTML Comments • The comment tag is used to insert comments in the source code. Comments are not displayed in browsers. • You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code. <!--This is a comment. Comments are not displayed in the browser--> • Developers should always be commenting code to explain the sections of the code they produced. Adding Content into HTML • Filler text can be used for content to put in place of content you create later on • Most common filler is Lorem Ipsum. • You can find filler content at: http://www.lipsum.com/ HTML5 – More help • http://www.w3schools.com/html.asp • http://html5doctor.com/element-index/
