Introduction to HTML
Upcoming SlideShare
Loading in...5
×
 

Introduction to HTML

on

  • 217 views

 

Statistics

Views

Total Views
217
Views on SlideShare
210
Embed Views
7

Actions

Likes
0
Downloads
13
Comments
0

3 Embeds 7

http://himpfen.com 3
https://www.behance.net 2
http://162.243.41.169 2

Accessibility

Categories

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.

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

Introduction to HTML Introduction to HTML Presentation Transcript

  • Introduction to HTML By Brandon Himpfen
  • Follow Me Website: http://himpfen.com/ 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: http://himpfen.com/ Twitter: @brandonhimpfen