SlideShare une entreprise Scribd logo
1  sur  10
LECTURE 3
Hamburger Markup Text Language
<body>
 Open Tag                        <div>

                                                                                </body>

 Content
                                                                                  <li>


   Close Tag                       </div>                                         </li>


          <head>                                  <script>                        <html>


          </head>                                </script>                        </html>
Hamburger Text Markup Language - http://www.dontfeartheinternet.com/html/html
Exception to the rule: VOID ELEMENTS
Void Elements are tags that don't require a closing tag to be valid.
These elements are usually elements that either stand alone on the page,
or where the end of their contents is obvious from the context of the page itself.



     <area >
     <base>
     <br>
     <col>                                             <div>
     <command>                                         Lorem ipsum dolor sit amet.
     <embed>                Void Elements              <br/>
     <hr>                                              <img src=“example.jpg”/>
     <img>                                             </div>
     <input>
     <link>
     <meta>
     <param>
     <source>
Common HTML Tags


    a - “anchor” used for hyperlinks           head - invisible part of your site
    blockquote - for large quotes              html - “what follows is HTML”
    body - visible part of your site           img - image
    br - line break                            li - list item
    cite - a citation                          link - to attach CSS stylesheets
    div - content divider                      ol - ordered list
    DOCTYPE - document type                    p - paragraph
    em - text w/ emphasis                      span - inline content divider
    h1 - most important header                 strong - strong text emphasis
    h2 - 2nd most important                    style - for inline CSS styling
    h3-h6 - 3-6th most important               title - title of the page
                                               ul - unordered list




List & Definitions via:
http://www.dontfeartheinternet.com/html/html
IMG Tag

 Required Attributes
 src is used to specify the location of the image file.
 alt is used to specify the alternative text of the image, which should be a short
 description.

 Optional Attributes
 height can be used to define the height of the image (in pixels).
 width can be used to define the width of the image (in pixels).
 (Height & width can also be defined using CSS.


 Example


       <img src="http://www.website.com/images/logo.gif"
         alt=“Logo” height=“50px” width=“50px” />




Info via:
http://www.htmldog.com/reference/htmltags/img/
Code of the Day
Monday – Friday


HOMEWORK ASSIGNMENT:
Pick a code from the list of
HTML tags & CSS selectors.
Research the code and put
together a definition of the
code to present in class.
Site Structure                             Example:
                                           www.heatherstrycharz.com
                         Home



        Web      Video          Services              About




                                 Web




                                 Video



                                  Print
                                   &
                                Branding
Site Structure




Image via:
http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html
Next Week




Tutorial:
http://www.w3.org/Style/Examples/011/firstcss
CSS Zen Garden




www.csszengarden.com

Contenu connexe

Tendances

Tendances (20)

Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
3 Layers of the Web - Part 1
3 Layers of the Web - Part 13 Layers of the Web - Part 1
3 Layers of the Web - Part 1
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScriptDYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
 
CSS-3 Course Slide
CSS-3 Course SlideCSS-3 Course Slide
CSS-3 Course Slide
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Basic html
Basic htmlBasic html
Basic html
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Css
CssCss
Css
 
Introduction to the Web and HTML
Introduction to the Web and HTMLIntroduction to the Web and HTML
Introduction to the Web and HTML
 
[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Web 2.0 - what is it?
Web 2.0  - what is it?Web 2.0  - what is it?
Web 2.0 - what is it?
 
Images on the Web
Images on the WebImages on the Web
Images on the Web
 
Web designing (2) - CSS Basic Coding
Web designing (2) - CSS Basic CodingWeb designing (2) - CSS Basic Coding
Web designing (2) - CSS Basic Coding
 

En vedette

Assignment
AssignmentAssignment
Assignment
bhup_289
 
Engagor introduction pitch
Engagor introduction pitchEngagor introduction pitch
Engagor introduction pitch
Dimitri Callens
 
Insights and opportunities
Insights and opportunitiesInsights and opportunities
Insights and opportunities
Kompella Kashyap
 
Session 3 week 2 central tendency & dispersion
Session 3 week 2   central tendency & dispersionSession 3 week 2   central tendency & dispersion
Session 3 week 2 central tendency & dispersion
Rachel Chung
 
Sweet pizza
Sweet pizzaSweet pizza
Sweet pizza
ycho168
 
Nossa senhora do rosario
Nossa senhora do rosarioNossa senhora do rosario
Nossa senhora do rosario
angical-piaui
 
Sprites rollovers
Sprites rolloversSprites rollovers
Sprites rollovers
hstryk
 
Juodosios Neli istorija
Juodosios Neli istorijaJuodosios Neli istorija
Juodosios Neli istorija
ievute112233
 

En vedette (20)

ファイナンシャル・エクストラネット
ファイナンシャル・エクストラネットファイナンシャル・エクストラネット
ファイナンシャル・エクストラネット
 
Assignment
AssignmentAssignment
Assignment
 
Irma presenta 1
Irma presenta 1Irma presenta 1
Irma presenta 1
 
ไฟฟ้ากลุ..
 ไฟฟ้ากลุ.. ไฟฟ้ากลุ..
ไฟฟ้ากลุ..
 
Aрхивация данных
Aрхивация данныхAрхивация данных
Aрхивация данных
 
Online branding for schools
Online branding for schoolsOnline branding for schools
Online branding for schools
 
Oap
OapOap
Oap
 
Engagor introduction pitch
Engagor introduction pitchEngagor introduction pitch
Engagor introduction pitch
 
Insights and opportunities
Insights and opportunitiesInsights and opportunities
Insights and opportunities
 
Cooll usersguide 3
Cooll usersguide 3Cooll usersguide 3
Cooll usersguide 3
 
04 03 wh_chris_walker
04 03 wh_chris_walker04 03 wh_chris_walker
04 03 wh_chris_walker
 
Session 3 week 2 central tendency & dispersion
Session 3 week 2   central tendency & dispersionSession 3 week 2   central tendency & dispersion
Session 3 week 2 central tendency & dispersion
 
Our Services increase your business as a Brand name.
Our Services increase your business as a Brand name.Our Services increase your business as a Brand name.
Our Services increase your business as a Brand name.
 
The cut scenes
The cut scenesThe cut scenes
The cut scenes
 
Powerpoint Presentatie Arvalis
Powerpoint Presentatie ArvalisPowerpoint Presentatie Arvalis
Powerpoint Presentatie Arvalis
 
Sweet pizza
Sweet pizzaSweet pizza
Sweet pizza
 
Nossa senhora do rosario
Nossa senhora do rosarioNossa senhora do rosario
Nossa senhora do rosario
 
Zyeta profile
Zyeta profileZyeta profile
Zyeta profile
 
Sprites rollovers
Sprites rolloversSprites rollovers
Sprites rollovers
 
Juodosios Neli istorija
Juodosios Neli istorijaJuodosios Neli istorija
Juodosios Neli istorija
 

Similaire à Lesson 3

Lesson2
Lesson2Lesson2
Lesson2
hstryk
 
3 v html_next_energy_03.27.2014_v1.0
3 v html_next_energy_03.27.2014_v1.03 v html_next_energy_03.27.2014_v1.0
3 v html_next_energy_03.27.2014_v1.0
3V Business Solutions
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
Shawn Calvert
 
HTML by Telerik Akademy
HTML by Telerik AkademyHTML by Telerik Akademy
HTML by Telerik Akademy
Ognyan Penkov
 

Similaire à Lesson 3 (20)

HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introduction
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
Html intro
Html introHtml intro
Html intro
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 
Html
HtmlHtml
Html
 
Lesson2
Lesson2Lesson2
Lesson2
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
3 v html_next_energy_03.27.2014_v1.0
3 v html_next_energy_03.27.2014_v1.03 v html_next_energy_03.27.2014_v1.0
3 v html_next_energy_03.27.2014_v1.0
 
Basic html
Basic htmlBasic html
Basic html
 
HTML5 introduction
HTML5 introductionHTML5 introduction
HTML5 introduction
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML by Telerik Akademy
HTML by Telerik AkademyHTML by Telerik Akademy
HTML by Telerik Akademy
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 

Plus de hstryk

CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
hstryk
 
Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2
hstryk
 
CSS3 Transitions
CSS3 TransitionsCSS3 Transitions
CSS3 Transitions
hstryk
 
CSS Layout Tutorial
CSS Layout TutorialCSS Layout Tutorial
CSS Layout Tutorial
hstryk
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
hstryk
 
Building a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSSBuilding a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSS
hstryk
 
Lecture4
Lecture4Lecture4
Lecture4
hstryk
 
Tutorial1 - Part 2
Tutorial1 - Part 2Tutorial1 - Part 2
Tutorial1 - Part 2
hstryk
 
Tutorial1
Tutorial1Tutorial1
Tutorial1
hstryk
 
Project1
Project1Project1
Project1
hstryk
 
Lesson2
Lesson2Lesson2
Lesson2
hstryk
 
Lesson1
Lesson1Lesson1
Lesson1
hstryk
 
Heather Strycharz - Resume
Heather Strycharz - ResumeHeather Strycharz - Resume
Heather Strycharz - Resume
hstryk
 

Plus de hstryk (14)

CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
 
Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2
 
Lesson1 - Fall 2013
Lesson1 - Fall 2013Lesson1 - Fall 2013
Lesson1 - Fall 2013
 
CSS3 Transitions
CSS3 TransitionsCSS3 Transitions
CSS3 Transitions
 
CSS Layout Tutorial
CSS Layout TutorialCSS Layout Tutorial
CSS Layout Tutorial
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Building a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSSBuilding a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSS
 
Lecture4
Lecture4Lecture4
Lecture4
 
Tutorial1 - Part 2
Tutorial1 - Part 2Tutorial1 - Part 2
Tutorial1 - Part 2
 
Tutorial1
Tutorial1Tutorial1
Tutorial1
 
Project1
Project1Project1
Project1
 
Lesson2
Lesson2Lesson2
Lesson2
 
Lesson1
Lesson1Lesson1
Lesson1
 
Heather Strycharz - Resume
Heather Strycharz - ResumeHeather Strycharz - Resume
Heather Strycharz - Resume
 

Dernier

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Dernier (20)

Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 

Lesson 3

  • 2. <body> Open Tag <div> </body> Content <li> Close Tag </div> </li> <head> <script> <html> </head> </script> </html> Hamburger Text Markup Language - http://www.dontfeartheinternet.com/html/html
  • 3. Exception to the rule: VOID ELEMENTS Void Elements are tags that don't require a closing tag to be valid. These elements are usually elements that either stand alone on the page, or where the end of their contents is obvious from the context of the page itself. <area > <base> <br> <col> <div> <command> Lorem ipsum dolor sit amet. <embed> Void Elements <br/> <hr> <img src=“example.jpg”/> <img> </div> <input> <link> <meta> <param> <source>
  • 4. Common HTML Tags a - “anchor” used for hyperlinks head - invisible part of your site blockquote - for large quotes html - “what follows is HTML” body - visible part of your site img - image br - line break li - list item cite - a citation link - to attach CSS stylesheets div - content divider ol - ordered list DOCTYPE - document type p - paragraph em - text w/ emphasis span - inline content divider h1 - most important header strong - strong text emphasis h2 - 2nd most important style - for inline CSS styling h3-h6 - 3-6th most important title - title of the page ul - unordered list List & Definitions via: http://www.dontfeartheinternet.com/html/html
  • 5. IMG Tag Required Attributes src is used to specify the location of the image file. alt is used to specify the alternative text of the image, which should be a short description. Optional Attributes height can be used to define the height of the image (in pixels). width can be used to define the width of the image (in pixels). (Height & width can also be defined using CSS. Example <img src="http://www.website.com/images/logo.gif" alt=“Logo” height=“50px” width=“50px” /> Info via: http://www.htmldog.com/reference/htmltags/img/
  • 6. Code of the Day Monday – Friday HOMEWORK ASSIGNMENT: Pick a code from the list of HTML tags & CSS selectors. Research the code and put together a definition of the code to present in class.
  • 7. Site Structure Example: www.heatherstrycharz.com Home Web Video Services About Web Video Print & Branding