Introduction to HTML
Upcoming SlideShare
Loading in...5

Introduction to HTML






Total Views
Views on SlideShare
Embed Views



3 Embeds 7 3 2 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Introduction to HTML Introduction to HTML Presentation Transcript

  • Introduction to HTML By Brandon Himpfen
  • Follow Me Website: Twitter: @brandonhimpfen
  • What is HTML?  HTML stands for HyperText Markup Language  The initial release of HTML was in 1993  The current version of HTML is 5, which was released on 4 February 2014  HTML is developed by W3C and WHATWG
  • Websites  A website consists of one web page or more than one web page.  An HTML document consists of HTML elements (tags with attributes).  A web browser will interpret the HTML elements to display the page.
  • HTML Elements  HTML elements in a web page is what the web browser will read and interpret to display the web page.  HTML elements will have a tag and one or more attributes (if supported).  Each HTML element will have a opening and closing – depends on the tag.
  • HTML Elements (Syntax) In general: <tag attribute=“value”> </tag> Or <tag attribute=“value” /> Remember, a tag can have one or more attributes.
  • HTML Elements Layout A web page has a structure of how elements are laid out.
  • Defining a HTML Web Page  A HTML web page will start and end with a HTML tag, like so: <HTML> … more elements and content .. </HTML>
  • HTML Head  After the opening of the <HTML> element, we will add the head HTML element.  The head element is a wrapper for other elements that define web page preferences.  What you add in between the head elements will not be shown in the web browser, as it is not web page content. <HEAD> … head related tags ... </HEAD>
  • HTML Head … cont’d  The following HTML element tags can be used within the <head></head> element:  <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
  • Title Tag  Each document should have a title tag: <title>Title of Web Page</title>  The title tag will only show on the web browser’s tab, not in the body on the web page itself.  The title tag should be in between the head tag: <HEAD> <TITLE>Title of Web Page</TITLE> </HEAD>
  • Body Tag  The body tag is used after the closing of the title tag and before the closing of the HTML tag.  Anything within the body tag will be rendered (to display) on the web page. <BODY> … stuff to show website visitors … </BODY>
  • Putting it All Together  We’ve just created a necessary HTML elements’ layout of a web page. <HTML> <HEAD> <TITLE>Title of the Web Page</TITLE> </HEAD> <BODY> … content shown to visitor in the web browser … </BODY> </HTML>
  • Common HTML Tags Let’s explore common HTML tags in a web page.
  • CSS related HTML Tags  CSS can be added to a web page in three (3) ways: 1. Inline 2. Internal 3. External
  • Inline CSS Example  Inline CSS will use a tag attribute called “style” and the CSS is held within that attribute. Let’s say we want to add CSS to the paragraph tag, which is <p></p> <p style=“color:#000;”>Paragraph text goes here.</p> Inline CSS goes only to the opening of the tag. In this example, color:#000 is the CSS.
  • Internal CSS Example  Internal CSS uses the <style></style> tag, with the CSS being held within that tag. < STYLE > … CSS goes here… </STYLE> The style tag can be used in between the head and body tags.
  • External CSS Example  External CSS is where a CSS file is references using the link tag. <link rel="stylesheet" type="text/css" href=“path-to-file/filename.css">  The link tag can be used in between the head and body tags, but preferably in the head tags.  In the example, link tag uses a attribute of rel (relationship) with a value of stylesheet, aka a CSS file.  In the example, the attribute type, states the type of document being referenced (linked to).  Href attribute refers to link location.
  • Meta Tags  Meta tags should be used only within the <head></head> tags.  Metadata is data (information) about data.  Metadata will not be displayed on the page.  Syntax: <meta name="" content="">  The name attribute is the name of the meta and the content attribute defines content of the name attribute.  You can have multiple meta tags in the head of the web page.  Meta tags are not required for the web page for render.
  • Common Meta Tags  Common meta tags’ names include: <meta name="keywords" content=""> Keywords defines common words of a web page. <meta name="description" content=""> Description defines what the web page is about. <meta name="author" content=""> Author defines who made the web page.
  • Script Tags  Script tags define a client-side script.  The script tag is common for referencing (linking) to JavaScript files.  Should be at the bottom of a web page, just before the closing body tag, </body>, but can be used in between the <head></head> tags.  The script tag can also be used anywhere in between the body tags.  Google Analytics Javascript code will commonly be put in between the <head></head> tags.  Why it is preferred in the bottom, before the </body>? Because these files are generally not required to load a web page, but are used to enhance the web page functionality.
  • Heading Tags  Heading tags define titles of a web page, which is display to the visitor. <hX>Title</hX> Where X is the number of the heading.  The number of the heading can be from 1 to 6, where 1 is the highest level (biggest) and 6 being the least level (smallest).  The highest level should be used the least in a web page, where to the least level, h6, should be used the most (if needed.)
  • Paragraph Tags  Paragraphs use the p tag. <p>The text of each paragraph will go here.</p>
  • Formatting Tags  Formatting tags fit into one of three categories: 1. Text 2. Computer Output 3. Citations, Quotations, and Definition
  • Text Formatting Tags Tag Example Usage Description <b> <b>text</b> Bold – You should be <strong> for HTML5 documents. <em> <em>text</em> Emphasize <i> <i>text</i> Italic <small> <small>text</small> Small <strong> <strong>text</strong> Newer version of bold <sub> <sub>text</sub> Subscript <sup> <sup>text</sup> Superscript <ins> <ins>text</ins> Inserted text <del> <del>text</del> Deleted text <mark> <mark>text</mark> Marked text
  • Computer Output Formatting Tags Tag Description <code> Code <kbd> Keyboard text <samp> Sample code <var> Variable <pre> Preformatted text Syntax: <tag>Text</tag>
  • Citations, Quotations, and Definition Tags Tag Description <abbr> Abbreviation <address> Address <bdo> Bi-Directional Override - Text direction <blockquote> Quote <q> Short quotation <cite> Citation <dfn> Definition (term)
  • Images  To add an image to a web page, we will use the img tag. <img src="" alt="" width="" height="“ />  The img tag does not have a closing tag, </img> but instead a closing in the opening tag.  Src attribute is the path to the image.  Alt should be a description of the image. Commonly seen when you hover over the image.  Width and height attributes should be included! It is a best practice.
  • Tables <table width=“” cellpadding=“” cellspacing=“”> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>  Tables consist of opening and closing tag, with table specific tags within it.  thead is the header group of a table  tr stands for table row  th stands for table heding, usually the first row.  td is a table cell, which contains data.  tbody stands for the table body.  Use table, thead and tbody once.  tr, th, and td can be used multiple times.  tr wraps around th and td tags.
  • Links  Links use the a tag.  Links can be made to internal or external web pages. <a href="“ title=“” target="">Link Text</a>  Href attribute is the URL  Title is the title of the link  You can add target, if you want, to open a link in a new web browser window.
  • The End There is more to HTML then this, but this should give you a good foundation. I hope you enjoyed this presentation!
  • Follow Me Website: Twitter: @brandonhimpfen