SlideShare ist ein Scribd-Unternehmen logo
1 von 27
ARTDM 171, Week 4:
   HTML Basics
Gilbert Guerrero, gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-171/
HTML Tags
     
HTML Reference
http://xhtml.com/en/xhtml/reference/
Create a new page in
   Dreamweaver
           
Working folders for this week
• Create a new folder in your ARTDM171 folder
  called Week4
• Create a new folder in Week4 called html
• Set the html folder as your local root folder
• Example:

    ARTDM171
      Week4
       html
Tags used for Page
Properties
•   <!DOCTYPE > - Defines the document type
•   <html></html> - Starts and ends the
    document
•   <head></head> - HTML Header. Comes after
    the <html> tag and before the <body> tag
•   <title></title> - HTML Title, the name of the
    document
•   <body></body> - Contains your visible
    content
Anatomy of a Web Page
     <html>

     <head>
     </head>

     <body>




     </body>
     </html>
Nesting

• Be sure to properly nest your tags
• Right: href=”xyz.html”>Xyz</a></em>
  <em><a



• Wrong:href=”xyz.html”>Xyz</em></a>
  <em><a
<meta /> – Meta Tags
•   <meta /> - Meta tags appear between the <head> tags.
    Used for page description, keywords, and other data.
•   Examples:
    ‣   <meta http-equiv="Content-Type" content="text/html;
        charset=UTF-8" />
    ‣   <meta name="keywords" content="design, technology,
        Web" /> 
    ‣   <meta name="description" content="This site is about
        bread." />
    ‣   <meta name="robots" content="noindex, nofollow" />
•   Using the robots meta tag: Google Webmaster Central
    Blog
Basic Tags

• <p></p> Paragraph
• <br /> Line break
 ‣ An empty tag, always end with a
   forward slash
• <em></em> Emphasis
• <strong></strong> Stronger emphasis
• <h1></h1> <h2></h2> <h3></h3>
  Headers
Semantic Web
• <em></em> and <strong></strong>     are
  known as Idiomatic Elements
 ‣ They help to convey meaning, which can
   be interpreted by a browser or device as
   a visual style, motion, sound volume, etc
•  <i></i> and <b></b> are Typographic
  Elements
 ‣ Add visual style to a page, but do not
   convey meaning
Semantic Web

• <p></p> add structure to content
  which helps convey meaning and
  thought progression
• <br /> could be used everywhere, but
  then meaning gets lost
Semantic Web
 Heading tags help add structure to
 the page and tell search engines
 whatʼs important
 <h1>Name of the Site</h1>
   <h2>Title of the Page</h2>
     <h3>Section on the Page</h3>
        <h4>Subsection</h4>
Semantic Web
 The Semantic Web by Tim Berners-
 Lee, James Hendler, and Ora Lassila
 “A new form of Web content that is
 meaningful to computers...”
Firefox Web Developer
        Plugin
https://addons.mozilla.org/en-US/
          firefox/addon/60
<a></a> - Anchor
•   Link to an external Web site:
    ‣   <a href="http://www.dvc.edu">DVC</a>
•   Link to a Web page on your own site:
    ‣   <a href="bread.html">My Page About Bread</a>
    ‣   <a href="about/history.html">History of Bread</a>
•   Hooks (invisible):
    ‣   <a name="croissants"></a>
•   Link to the hook:
    ‣   <a href="index.html#croissants">Croissants</a>
<img /> - Image

• <img src="images/file.jpg"
  border="0" height="10" width="10" /> 
• Border, Width and Height are
  optional.
<ul>, <ol> — Lists
•   Unordered Lists (Bulleted)
•   <ul>
       <li>Eggs</li>
       <li>Milk</li>
       <li>Potatoes</li>

•   </ul>
•   Ordered Lists (Numbered)
•   <ol>
       <li>Eggs</li>
       <li>Milk</li>
       <li>Potatoes</li>
•   </ol>
&nbsp; — non breaking
        space
<table> – Table tags
<table></table> – Table. Encloses your table.
  You can set the width (Pixels or Percentage
  %), border, and cellpadding and cellspacing
  as attributes.

<tr></tr> – Row. Encloses a row in your table.

<td></td> – Cell. Encloses what's in each cell of
  the table. These also create your columns.
  Make sure you have the same number of cells
  in each row.
Table Example
<table width="540" border="0" cellpadding="0"
cellspacing="0">
   <tr>
      <td>column 1</td>
      <td>column 2</td>            Let’s try this
      <td>column 3</td>             example.
   </tr>
   <tr>
      <td>Eggs</td>
      <td>Milk</td>
      <td>Potatoes</td>
   </tr>
</table>
Table Example
                              <table>


<tr>   <td> Column 1 </td> <td> Column 2 </td> <td> Column 3 </td>
                                                                     </tr>
<tr>     <td> Eggs </td>     <td> Milk </td>   <td> Potatoes </td>    </tr>


                               </table>
Fonts
• For fonts, colors, and sizes, use CSS. 
• Placed between the <head></head> tags
• <style type="text/css></style> - Style
  tags. Enclose your CSS code in these.
• Page Elements
 ‣ CSS uses page elements to specify
   fonts.  You can set a font on any page
   element, body, h1, p, a,...
What about the <font> tag?

• <font> tag is dead!
• No longer the standard in todayʼs
  World Wide Web
• <font> tags embed presentation in
  the structure
• With CSS, our goal will be to
  separate presentation from structure
Group Projects
Homework due Feb 23
•   Read and follow along Chapter 7: Styling Page
    Content
    ‣   Use last weekʼs homework and add CSS
    ‣   Add at least 9 rules
           3 style rules for tags
           2 custom classes
           2 compound styles
           2 divs with styles applied to the idʼs
•   There will be a quiz on Chapter 7 next week!
•   Next week we'll go deep into CSS
Thank You

Weitere ähnliche Inhalte

Was ist angesagt?

HTML/CSS Workshop @ Searchcamp
HTML/CSS Workshop @ SearchcampHTML/CSS Workshop @ Searchcamp
HTML/CSS Workshop @ SearchcampJames Mills
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行Sofish Lin
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlantaThinkful
 
Html5 elements-Kip Academy
Html5 elements-Kip AcademyHtml5 elements-Kip Academy
Html5 elements-Kip Academykip academy
 
Intro to HTML and CSS
Intro to HTML and CSSIntro to HTML and CSS
Intro to HTML and CSSlexinamer
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]Dalibor Gogic
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)博史 高木
 
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)Michaela Lehr
 
Artdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group ProjectsArtdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group Projectsguestca5654
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSNYCSS Meetup
 

Was ist angesagt? (20)

HTML/CSS Workshop @ Searchcamp
HTML/CSS Workshop @ SearchcampHTML/CSS Workshop @ Searchcamp
HTML/CSS Workshop @ Searchcamp
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
Web 102 INtro to CSS
Web 102  INtro to CSSWeb 102  INtro to CSS
Web 102 INtro to CSS
 
Html5 elements-Kip Academy
Html5 elements-Kip AcademyHtml5 elements-Kip Academy
Html5 elements-Kip Academy
 
Joomla Technical SEO
Joomla Technical SEOJoomla Technical SEO
Joomla Technical SEO
 
Intro to HTML and CSS
Intro to HTML and CSSIntro to HTML and CSS
Intro to HTML and CSS
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
Artdm171 Week5 Css
Artdm171 Week5 CssArtdm171 Week5 Css
Artdm171 Week5 Css
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
Web 101 intro to html
Web 101  intro to htmlWeb 101  intro to html
Web 101 intro to html
 
Intro to CSS
Intro to CSSIntro to CSS
Intro to CSS
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
 
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
 
Artdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group ProjectsArtdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group Projects
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
Session Two css
Session Two cssSession Two css
Session Two css
 

Andere mochten auch

ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityGilbert Guerrero
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishingGilbert Guerrero
 
Be Your Community's Mobile Leader
Be Your Community's Mobile LeaderBe Your Community's Mobile Leader
Be Your Community's Mobile LeaderSteve Buttry
 
Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightGilbert Guerrero
 
Media Writing slides Oct. 27
Media Writing slides Oct. 27Media Writing slides Oct. 27
Media Writing slides Oct. 27Steve Buttry
 

Andere mochten auch (9)

ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
 
Be Your Community's Mobile Leader
Be Your Community's Mobile LeaderBe Your Community's Mobile Leader
Be Your Community's Mobile Leader
 
Crowdsourcing
CrowdsourcingCrowdsourcing
Crowdsourcing
 
Artdm 171 week15 seo
Artdm 171 week15 seoArtdm 171 week15 seo
Artdm 171 week15 seo
 
Engaging with TBD
Engaging with TBDEngaging with TBD
Engaging with TBD
 
ARTDM 171, Week 14: Forms
ARTDM 171, Week 14: FormsARTDM 171, Week 14: Forms
ARTDM 171, Week 14: Forms
 
Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright Sunlight
 
Media Writing slides Oct. 27
Media Writing slides Oct. 27Media Writing slides Oct. 27
Media Writing slides Oct. 27
 

Ähnlich wie Artdm171 Week4 Tags

Ähnlich wie Artdm171 Week4 Tags (20)

Css
CssCss
Css
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Lecture 2 - HTML Basics
Lecture 2 - HTML BasicsLecture 2 - HTML Basics
Lecture 2 - HTML Basics
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Html intro
Html introHtml intro
Html intro
 
Lecture 03 HTML&CSS Part 2
Lecture 03   HTML&CSS Part 2Lecture 03   HTML&CSS Part 2
Lecture 03 HTML&CSS Part 2
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
Introduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSSIntroduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSS
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 
BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptx
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-template
 
Html coding
Html codingHtml coding
Html coding
 
Html cia
Html ciaHtml cia
Html cia
 
Html Css
Html CssHtml Css
Html Css
 

Mehr von Gilbert Guerrero

ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAGilbert Guerrero
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysGilbert Guerrero
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingGilbert Guerrero
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesGilbert Guerrero
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interactionGilbert Guerrero
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 TemplatesGilbert Guerrero
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsGilbert Guerrero
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesGilbert Guerrero
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceGilbert Guerrero
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceGilbert Guerrero
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionGilbert Guerrero
 
Artdm170 Week5 Intro To Flash
Artdm170 Week5 Intro To FlashArtdm170 Week5 Intro To Flash
Artdm170 Week5 Intro To FlashGilbert Guerrero
 
Artdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script EffectsArtdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script EffectsGilbert Guerrero
 
ARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group ProjectsARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group ProjectsGilbert Guerrero
 
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversGilbert Guerrero
 

Mehr von Gilbert Guerrero (20)

ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + Arrays
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to Processing
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm171 Week6 Images
Artdm171 Week6 ImagesArtdm171 Week6 Images
Artdm171 Week6 Images
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week5 Intro To Flash
Artdm170 Week5 Intro To FlashArtdm170 Week5 Intro To Flash
Artdm170 Week5 Intro To Flash
 
Artdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script EffectsArtdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script Effects
 
ARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group ProjectsARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group Projects
 
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
 

Artdm171 Week4 Tags

  • 1. ARTDM 171, Week 4: HTML Basics Gilbert Guerrero, gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
  • 4. Create a new page in Dreamweaver  
  • 5. Working folders for this week • Create a new folder in your ARTDM171 folder called Week4 • Create a new folder in Week4 called html • Set the html folder as your local root folder • Example: ARTDM171 Week4 html
  • 6. Tags used for Page Properties • <!DOCTYPE > - Defines the document type • <html></html> - Starts and ends the document • <head></head> - HTML Header. Comes after the <html> tag and before the <body> tag • <title></title> - HTML Title, the name of the document • <body></body> - Contains your visible content
  • 7. Anatomy of a Web Page <html> <head> </head> <body> </body> </html>
  • 8. Nesting • Be sure to properly nest your tags • Right: href=”xyz.html”>Xyz</a></em> <em><a • Wrong:href=”xyz.html”>Xyz</em></a> <em><a
  • 9. <meta /> – Meta Tags • <meta /> - Meta tags appear between the <head> tags. Used for page description, keywords, and other data. • Examples: ‣ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ‣ <meta name="keywords" content="design, technology, Web" />  ‣ <meta name="description" content="This site is about bread." /> ‣ <meta name="robots" content="noindex, nofollow" /> • Using the robots meta tag: Google Webmaster Central Blog
  • 10. Basic Tags • <p></p> Paragraph • <br /> Line break ‣ An empty tag, always end with a forward slash • <em></em> Emphasis • <strong></strong> Stronger emphasis • <h1></h1> <h2></h2> <h3></h3> Headers
  • 11. Semantic Web • <em></em> and <strong></strong> are known as Idiomatic Elements ‣ They help to convey meaning, which can be interpreted by a browser or device as a visual style, motion, sound volume, etc •  <i></i> and <b></b> are Typographic Elements ‣ Add visual style to a page, but do not convey meaning
  • 12. Semantic Web • <p></p> add structure to content which helps convey meaning and thought progression • <br /> could be used everywhere, but then meaning gets lost
  • 13. Semantic Web Heading tags help add structure to the page and tell search engines whatʼs important <h1>Name of the Site</h1> <h2>Title of the Page</h2> <h3>Section on the Page</h3> <h4>Subsection</h4>
  • 14. Semantic Web The Semantic Web by Tim Berners- Lee, James Hendler, and Ora Lassila “A new form of Web content that is meaningful to computers...”
  • 15. Firefox Web Developer Plugin https://addons.mozilla.org/en-US/ firefox/addon/60
  • 16. <a></a> - Anchor • Link to an external Web site: ‣ <a href="http://www.dvc.edu">DVC</a> • Link to a Web page on your own site: ‣ <a href="bread.html">My Page About Bread</a> ‣ <a href="about/history.html">History of Bread</a> • Hooks (invisible): ‣ <a name="croissants"></a> • Link to the hook: ‣ <a href="index.html#croissants">Croissants</a>
  • 17. <img /> - Image • <img src="images/file.jpg" border="0" height="10" width="10" />  • Border, Width and Height are optional.
  • 18. <ul>, <ol> — Lists • Unordered Lists (Bulleted) • <ul> <li>Eggs</li> <li>Milk</li> <li>Potatoes</li> • </ul> • Ordered Lists (Numbered) • <ol> <li>Eggs</li> <li>Milk</li> <li>Potatoes</li> • </ol>
  • 19. &nbsp; — non breaking space
  • 20. <table> – Table tags <table></table> – Table. Encloses your table. You can set the width (Pixels or Percentage %), border, and cellpadding and cellspacing as attributes. <tr></tr> – Row. Encloses a row in your table. <td></td> – Cell. Encloses what's in each cell of the table. These also create your columns. Make sure you have the same number of cells in each row.
  • 21. Table Example <table width="540" border="0" cellpadding="0" cellspacing="0"> <tr> <td>column 1</td> <td>column 2</td> Let’s try this <td>column 3</td> example. </tr> <tr> <td>Eggs</td> <td>Milk</td> <td>Potatoes</td> </tr> </table>
  • 22. Table Example <table> <tr> <td> Column 1 </td> <td> Column 2 </td> <td> Column 3 </td> </tr> <tr> <td> Eggs </td> <td> Milk </td> <td> Potatoes </td> </tr> </table>
  • 23. Fonts • For fonts, colors, and sizes, use CSS.  • Placed between the <head></head> tags • <style type="text/css></style> - Style tags. Enclose your CSS code in these. • Page Elements ‣ CSS uses page elements to specify fonts.  You can set a font on any page element, body, h1, p, a,...
  • 24. What about the <font> tag? • <font> tag is dead! • No longer the standard in todayʼs World Wide Web • <font> tags embed presentation in the structure • With CSS, our goal will be to separate presentation from structure
  • 26. Homework due Feb 23 • Read and follow along Chapter 7: Styling Page Content ‣ Use last weekʼs homework and add CSS ‣ Add at least 9 rules  3 style rules for tags  2 custom classes  2 compound styles  2 divs with styles applied to the idʼs • There will be a quiz on Chapter 7 next week! • Next week we'll go deep into CSS

Hinweis der Redaktion

  1. &amp;#xA0;&amp;#xA0;
  2. Dreamweaver automatically generates most of this when you create a new document. 10 lines of code (including a blank line between head and body.) &amp;#xA0; Take a look at these tags in Dreamweaver in a basic HTML document.
  3. (Notice the attributes.)
  4. Class Exercise:&amp;#x2192;&amp;#xA0;&amp;#xA0; Add a page heading, paragraph, bold, italics, link, and an image. Use the image saved in the ARTDM-171 folder. (Drag and drop it into the images folder on your USB drive.)