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

Intro to HTML

on

  • 6,553 views

These are the slides from my Intro to HTML talk that I gave for Trade School Indy on 12 Feb, 2014. ...

These are the slides from my Intro to HTML talk that I gave for Trade School Indy on 12 Feb, 2014.

More information posted at http://randyoest.com/html/ or follow me on Twitter at @amazingrando.

Statistics

Views

Total Views
6,553
Views on SlideShare
5,918
Embed Views
635

Actions

Likes
26
Downloads
106
Comments
3

14 Embeds 635

http://randyoest.com 376
http://dcyadecristian.blogspot.com.es 101
https://dcyadecristian.blogspot.com 61
http://www.socialmediaimg.com 52
https://twitter.com 14
http://ead.fdsm.edu.br 8
http://www.linkedin.com 8
http://www.google.com 7
http://www.randyoest.com 2
http://dcyadecristian.blogspot.com 2
https://www.linkedin.com 1
https://home.jolicloud.com 1
http://tweetedtimes.com 1
http://dcyadecristian.blogspot.com.ar 1
More...

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…
  • Nice presentation. All 55 slides are very useful You have done a terrific job. I liked the quote 'HTML is really the skeleton of web pages.'
    Are you sure you want to
    Your message goes here
    Processing…
  • Glad that you found it useful. I have some more info posted on my blog at http://randyoest.com/html if you're looking for more.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks, that was both very useful and easy to read!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to HTML Intro to HTML Presentation Transcript

  • Intro to HTML
  • Randy Oest Manager of Digital Design Williams Randall Marketing ! @amazingrando
  • Why Learn HTML? 1. Running a blog on a CMS and want to tweak things 2. Working with a developer and want to understand how to talk with them 3. Web designer looking to understand how things get built
  • What We’ll Learn 1. What is HTML 2. How to mark up a document 3. How a page is structured
  • HTML is the Skeleton of Web pages.
  • HTML is a
 Markup Language
  • Marky Markup
 Language
  • HTML uses markup tags to describe elements on a page. <tag>Text</tag>
  • Anatomy of a Tag <tag>Text</tag> Start Tag End Tag
  • About 80 Tags a   code   abbr   col   acronym   colgroup   address   dd   area   del   b   dfn   base   div   bdo   dl   big   DOCTYPE   blockquote   dt   body   em   br   fieldset   button   form   caption   h1,  h2,  h3,   h4,  h5,  and   h6   cite   head   object   html   ol   hr   optgroup   i   option   img   p   input   param   ins   pre   kbd   q   label   samp   legend   script   li   select   link   small   map   span   meta   strong   noscript   style   sub   sup   table   tbody   td   textarea   tfoot   th   thead   title   tr   tt   ul   var
  • Some Are Used More Often a   code   abbr   col   acronym   colgroup   address   dd   area   del   b   dfn   base   div   bdo   dl   big   DOCTYPE   blockquote   dt   body   em   br   fieldset   button   form   caption   h1,  h2,  h3,   h4,  h5,  and   h6   cite   head   object   html   ol   hr   optgroup   i   option   img   p   input   param   ins   pre   kbd   q   label   samp   legend   script   li   select   link   small   map   span   meta   strong   noscript   style   sub   sup   table   tbody   td   textarea   tfoot   th   thead   title   tr   tt   ul   var
  • Nesting Tags <i><b>italic & bold</b></i>
  • Self-closing Tags Some tags don’t wrap around anything. These are self-closing tags. <img  src=“”>  or <img  src=“”  />
  • Tags Can Have Attributes Attributes are additional information added to a tag. <img  src=“”>   <a  href=“”  class=“”>   <div  class=“”>
  • Tags are used to give semantic meaning to text. e.g., paragraph, header, bold, emphasis, etc.
  • Let’s Learn By Example
  • Starting the HTML <!DOCTYPE  html>   <html>     <body>       <!—-­‐  content  —-­‐>         </body>   </html>  
  • Let’s talk about 
 Headings, Paragraphs, 
 and Formatting.
  • Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
  • DO NOT use headings 
 to make text BIGGER 
 or BOLDER. Styling should be done with CSS.
  • You have signed up for Intro to CSS, right?
  • Paragraphs Paragraphs are defined with the <p> tag. <p>This is some stuff </p>
  • Links Links are defined with the <a> tag with the href pointing to the destination. <a  href=“http://foo.com”>Text</a>
  • Two Varieties of Links Absolute & Relative.
  • Absolute Links Absolute links point directly to the destination. <a  href=“http://foo.com”>Text</a> Typically starts with http://
  • Relative Links Relative links are based on where the destination is from where you are. <a  href=“/folder/page.html”>Text</a>   <a  href=“../page.html”>Text</a>
  • Images Images are self-closing tags <img  src=“mocha.jpg”  />   <img  src=“mocha.jpg”  alt=“Mocha  the   cat”  />  
  • Lists Lists come in two varieties, ordered and unordered. 1. Item 2. Item 3. Item •Item •Item •Item
  • List Items List items use the <li> tag. <li>Loves food</li>   <li>Good at cuddling</li>   <li>Chews wires</li>
  • Lists Need An Outer Tag Ordered lists use the <ol> tag. <ol>     <li>Loves food</li>     <li>Good at cuddling</li>     <li>Chews wires</li>   </ol>
  • Lists Need An Outer Tag Unordered lists use the <ul> tag. <ul>     <li>Loves food</li>     <li>Good at cuddling</li>     <li>Chews wires</li>   </ul>
  • Now let’s roll up our sleeves and talk about layout.
  • Layout Most pages have a header, content and footer.
  • <div>
  • The Magic of <div> The <div> tag can be used with IDs and Classes to become whatever they need to be.
  • IDs and Classes IDs and Classes provide targets for CSS and Javascript.
  • IDs and Classes IDs are unique. Classes are reusable.
  • Examples <div  id=“header”></div>   <div  id=“nav”></div>   <div  class=“active-­‐region”>
 </div>
  • Comments The comment tag is useful for making notes in HTML. <!—-­‐  comment  here  —-­‐>
  • <div>’s Have No Style By themselves <div>’s have no style or formatting. CSS is used to style the presentation of HTML.
  • Further Learning RandyOest.com/HTML W3Schools (free) Team Treehouse (not free)