SlideShare a Scribd company logo
HTML Basics Ryan Dinwiddie UCC Spring 2010
HTML Short for  H yper T ext  M arkup  L anguage,  the  language used to create documents on the World Wide Web.  HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.
HTML HTML is a collection of styles (indicated by markup  tags ) that define the various  elements  of a World Wide Web document.  HTML document can be read and displayed by many different browsers running on different types of computers – platform independent!
HTML: What do you need? Editor  (Notepad) Browser to view results Place to put your web site (store the files that contain the HTML code, images, music, etc.), preferably on the internet URL for your page (domain name, or folder within a domain)     if your page is on the Internet (Links to your page!)
HTML A web page is best thought of as a set of visual  elements   (words, paragraphs, lists, tables, images, etc.) HTML defines the structure and layout of the elements on a web page with a variety of  tags. Each tag may have a set of  attributes  that modify the appearance or layout of the visual element  contained  by the tag.
HTML Tags Container Tags <Begin formatting>some text</End formatting> For example:  <B>some bold text</B>    <H1>some heading </H1> Empty Element Tags For example <HR> <BR> Comment Tag <!-- Hi, I'm a comment. --> Use them document complicated layouts!
HTML tags Case insensitive Unrecognised  tags are simply ignored by browser!! Container tags must be nested!!
Structure of HTML document Basic structure:
BODY tag and attributes E.g., the  BGCOLOR   attribute  of BODY  tag  specifies the color of the whole document.  E.g., the  TEXT   attribute  of BODY  tag  specifies the default color of the text in the whole document . <BODY BGCOLOR = “yellow” TEXT = “purple”>
Headings and Paragraphs Supplies default formatting information: <H1>A Top-Level Heading 1</H1>  <P> A paragraph of text </P> <H6>A 6 th -level Heading</H6> Alignment Attribute: ALIGN =  position  (LEFT, CENTER, or RIGHT) <P ALIGN = CENTER>A  centred  paragraph</P> <BLOCKQUOTE>, <CAPTION>, <PRE> Special paragraph formatting tags
Text Formatting tags Always container tags!!  Always use closing tag! Logical Styles: <EM>, <STRONG>    add emphasis to text <BIG>, <SMALL>    increase or decrease text size <SUB>, <SUP>    subscript or superscript Physical styles: <B>, <I>, <U>    Bold, Italics, and Underline text <FONT SIZE=# FACE= “name” COLOR=“colorName or #rgb” > E.g., <FONT SIZE=+2 FACE = “arial” COLOR = “darkblue”>
HTML  Lists Ordered List  <OL TYPE = A>  <LI>list item A <LI>list item B </OL> Unordered List <UL TYPE = SQUARE>  <LI>bulleted list item <LI>another list item </UL>
Hyperlinks <A> … </A> is an  anchor  container tag HREF is an attribute of the anchor tag <A HREF = “http://www.umpqua.edu”> UCC </A> Absolute (off-site) vs. Relative (within site) URL’s Naming locations within a document: <A NAME=“top”>Text to link to</A> Linking to a named location within a document: <A HREF=“#top”>Click here to go to Top.</A> <A HREF=“index.htm#top”>Go to Top of Home page</A>
Multi-media: Images < IMG SRC = “logo.jpg” WIDTH = 300 HEIGHT=100 ALT=“Logo” > Creating an image link: <A HREF= www.u mpqua.edu>  <IMG SRC = “Logo.jpg WIDTH=150 HEIGHT=50 ALT = “Click here to go to UCC” >  </A> Other IMG tag attributes:   ALIGN, BORDER, HSPACE, VSPACE USEMAP = “map url”    creates a “hyperlink map” for image To including other Multi-media elements:  just link to .wav, .mpeg, .mp3 files with an anchor tag.
HTML Tables In HTML, tables are described by a set of  rows .  Each row has a set of  data , which form columns.  <TABLE> <TR> <TH>Heading for first column <TH>Heading for second column </TR> <TR> <TD>Data for first column, row 1 <TD>Data for second column, row 1 </TR>  … </TABLE>
More on Tables Common <TABLE> attributes: BORDER, CELLSPACING, CELLPADING, WIDTH e.g., <TABLE BORDER=4, WIDTH=50%> Use BORDER = 0 for no border (e.g., fancy layouts) Common <TD> attributes  (most apply to <TR> also): BGCOLOR    set the colour of the cell ALIGN, CHAR, VALIGN    alignment within cell COLSPAN, ROWSPAN    to create “merged cells” e.g., <TD VALIGN=MIDDLE CHAR=“.”>
Using table to do complex layouts Since a <TD> element may contain text, images, lists, links, etc., tables are often used to create complex page layouts!  E.g. look at source for Joseph’s home page. Need to get good at using COLSPAN and ROWSPAN attributes.
Using table to do complex layouts Best to layout table on paper or using Word first, then jot down COLSPAN and ROWSPAN values for any “merged cells” – write down sequence of <TR> & <TD> tags required. Warning : if you don’t design complex tables first, you  will  get confused and frustrated – guaranteed!

More Related Content

What's hot

Html
HtmlHtml
Html Presentation Of Web Page Making
Html Presentation Of Web Page MakingHtml Presentation Of Web Page Making
Html Presentation Of Web Page Making
Sandeep Supal
 
Html
HtmlHtml
Html tag
Html tagHtml tag
Html tag
NIRMAL FELIX
 
Intro Html
Intro HtmlIntro Html
Intro Html
Chidanand Byahatti
 
Html text formatting
Html text formattingHtml text formatting
Html text formatting
derekoei
 
html tags
html tagshtml tags
html tags
Kunal gupta
 
Html ppt computer
Html ppt computerHtml ppt computer
Html ppt computer
Anmol Pant
 
Html intro
Html introHtml intro
Html intro
kalaivani.g
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
Hinopak Motors Limited
 
Prabu html
Prabu htmlPrabu html
Prabu html
Prabu Cse
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
Jorge Zapico
 
HTML
HTMLHTML
HTML
ARJUN
 
Web Fundamentals And Html Chapter 1
Web Fundamentals And Html Chapter 1Web Fundamentals And Html Chapter 1
Web Fundamentals And Html Chapter 1
raileeanne
 
HTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by MukeshHTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by Mukesh
Mukesh Kumar
 
Design Dream
Design DreamDesign Dream
Design Dream
IEEE UVPCE
 
Edi Dom
Edi DomEdi Dom
Edi Dom
guestbb487d1
 
Html project
Html projectHtml project
Html project
arsh7511
 
Html basic
Html basicHtml basic
Html basic
Nital Shingala
 
Module 2
Module 2Module 2
Module 2
Xiyue Yang
 

What's hot (20)

Html
HtmlHtml
Html
 
Html Presentation Of Web Page Making
Html Presentation Of Web Page MakingHtml Presentation Of Web Page Making
Html Presentation Of Web Page Making
 
Html
HtmlHtml
Html
 
Html tag
Html tagHtml tag
Html tag
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
Html text formatting
Html text formattingHtml text formatting
Html text formatting
 
html tags
html tagshtml tags
html tags
 
Html ppt computer
Html ppt computerHtml ppt computer
Html ppt computer
 
Html intro
Html introHtml intro
Html intro
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 
Prabu html
Prabu htmlPrabu html
Prabu html
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
HTML
HTMLHTML
HTML
 
Web Fundamentals And Html Chapter 1
Web Fundamentals And Html Chapter 1Web Fundamentals And Html Chapter 1
Web Fundamentals And Html Chapter 1
 
HTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by MukeshHTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by Mukesh
 
Design Dream
Design DreamDesign Dream
Design Dream
 
Edi Dom
Edi DomEdi Dom
Edi Dom
 
Html project
Html projectHtml project
Html project
 
Html basic
Html basicHtml basic
Html basic
 
Module 2
Module 2Module 2
Module 2
 

Viewers also liked

Lecture 1
Lecture 1Lecture 1
Lecture 1
uccwebcourses
 
Información contable
Información contableInformación contable
Información contable
Ministerio de Educación
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
uccwebcourses
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
uccwebcourses
 
Int Lecture 4
Int Lecture 4Int Lecture 4
Int Lecture 4
uccwebcourses
 
Darren Lee Gallery
Darren Lee GalleryDarren Lee Gallery
Darren Lee Gallery
Darren Lee
 
Int Lecture 3
Int Lecture 3Int Lecture 3
Int Lecture 3
uccwebcourses
 
Personalized Multi Channel Marketing
Personalized Multi Channel MarketingPersonalized Multi Channel Marketing
Personalized Multi Channel Marketing
David Williams
 

Viewers also liked (9)

Lecture 1
Lecture 1Lecture 1
Lecture 1
 
Información contable
Información contableInformación contable
Información contable
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 
Int Lecture 4
Int Lecture 4Int Lecture 4
Int Lecture 4
 
Darren Lee Gallery
Darren Lee GalleryDarren Lee Gallery
Darren Lee Gallery
 
Int Lecture 3
Int Lecture 3Int Lecture 3
Int Lecture 3
 
Personalized Multi Channel Marketing
Personalized Multi Channel MarketingPersonalized Multi Channel Marketing
Personalized Multi Channel Marketing
 
Codex2
Codex2Codex2
Codex2
 

Similar to Lecture 4

Html
HtmlHtml
Html
HtmlHtml
Html intro
Html introHtml intro
Html intro
kalaivani.g
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
Brainware Consultancy Pvt Ltd
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
mlackner
 
AK html
AK  htmlAK  html
AK html
gauravashq
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Jerome Locson
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
mohamed ashraf
 
Html ppt
Html pptHtml ppt
Html ppt
Iblesoft
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
jlinabary
 
Intro to html
Intro to htmlIntro to html
Intro to html
anshuman rahi
 
Intro to html
Intro to htmlIntro to html
Intro to html
anshuman rahi
 
Html for translators
Html for translatorsHtml for translators
Html for translators
Andrea Spila
 
Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
Ahsan Uddin Shan
 
Html basic
Html basicHtml basic
Html basic
Charitha Bandara
 
Html For Beginners 2
Html For Beginners 2Html For Beginners 2
Html For Beginners 2
Sriram Raj
 
Html ppt
Html pptHtml ppt
Html ppt
Sanmuga Nathan
 
Html Ppt
Html PptHtml Ppt
Html Ppt
Sanmuga Nathan
 
Understanding html
Understanding htmlUnderstanding html
Understanding html
Ray Villalobos
 

Similar to Lecture 4 (20)

Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html intro
Html introHtml intro
Html intro
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
 
AK html
AK  htmlAK  html
AK html
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html ppt
Html pptHtml ppt
Html ppt
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Html for translators
Html for translatorsHtml for translators
Html for translators
 
Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
 
Html basic
Html basicHtml basic
Html basic
 
Html For Beginners 2
Html For Beginners 2Html For Beginners 2
Html For Beginners 2
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Understanding html
Understanding htmlUnderstanding html
Understanding html
 

Lecture 4

  • 1. HTML Basics Ryan Dinwiddie UCC Spring 2010
  • 2. HTML Short for H yper T ext M arkup L anguage, the language used to create documents on the World Wide Web. HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.
  • 3. HTML HTML is a collection of styles (indicated by markup tags ) that define the various elements of a World Wide Web document. HTML document can be read and displayed by many different browsers running on different types of computers – platform independent!
  • 4. HTML: What do you need? Editor (Notepad) Browser to view results Place to put your web site (store the files that contain the HTML code, images, music, etc.), preferably on the internet URL for your page (domain name, or folder within a domain)  if your page is on the Internet (Links to your page!)
  • 5. HTML A web page is best thought of as a set of visual elements (words, paragraphs, lists, tables, images, etc.) HTML defines the structure and layout of the elements on a web page with a variety of tags. Each tag may have a set of attributes that modify the appearance or layout of the visual element contained by the tag.
  • 6. HTML Tags Container Tags <Begin formatting>some text</End formatting> For example: <B>some bold text</B> <H1>some heading </H1> Empty Element Tags For example <HR> <BR> Comment Tag <!-- Hi, I'm a comment. --> Use them document complicated layouts!
  • 7. HTML tags Case insensitive Unrecognised tags are simply ignored by browser!! Container tags must be nested!!
  • 8. Structure of HTML document Basic structure:
  • 9. BODY tag and attributes E.g., the BGCOLOR attribute of BODY tag specifies the color of the whole document. E.g., the TEXT attribute of BODY tag specifies the default color of the text in the whole document . <BODY BGCOLOR = “yellow” TEXT = “purple”>
  • 10. Headings and Paragraphs Supplies default formatting information: <H1>A Top-Level Heading 1</H1> <P> A paragraph of text </P> <H6>A 6 th -level Heading</H6> Alignment Attribute: ALIGN = position (LEFT, CENTER, or RIGHT) <P ALIGN = CENTER>A centred paragraph</P> <BLOCKQUOTE>, <CAPTION>, <PRE> Special paragraph formatting tags
  • 11. Text Formatting tags Always container tags!! Always use closing tag! Logical Styles: <EM>, <STRONG>  add emphasis to text <BIG>, <SMALL>  increase or decrease text size <SUB>, <SUP>  subscript or superscript Physical styles: <B>, <I>, <U>  Bold, Italics, and Underline text <FONT SIZE=# FACE= “name” COLOR=“colorName or #rgb” > E.g., <FONT SIZE=+2 FACE = “arial” COLOR = “darkblue”>
  • 12. HTML Lists Ordered List <OL TYPE = A> <LI>list item A <LI>list item B </OL> Unordered List <UL TYPE = SQUARE> <LI>bulleted list item <LI>another list item </UL>
  • 13. Hyperlinks <A> … </A> is an anchor container tag HREF is an attribute of the anchor tag <A HREF = “http://www.umpqua.edu”> UCC </A> Absolute (off-site) vs. Relative (within site) URL’s Naming locations within a document: <A NAME=“top”>Text to link to</A> Linking to a named location within a document: <A HREF=“#top”>Click here to go to Top.</A> <A HREF=“index.htm#top”>Go to Top of Home page</A>
  • 14. Multi-media: Images < IMG SRC = “logo.jpg” WIDTH = 300 HEIGHT=100 ALT=“Logo” > Creating an image link: <A HREF= www.u mpqua.edu> <IMG SRC = “Logo.jpg WIDTH=150 HEIGHT=50 ALT = “Click here to go to UCC” > </A> Other IMG tag attributes: ALIGN, BORDER, HSPACE, VSPACE USEMAP = “map url”  creates a “hyperlink map” for image To including other Multi-media elements: just link to .wav, .mpeg, .mp3 files with an anchor tag.
  • 15. HTML Tables In HTML, tables are described by a set of rows . Each row has a set of data , which form columns. <TABLE> <TR> <TH>Heading for first column <TH>Heading for second column </TR> <TR> <TD>Data for first column, row 1 <TD>Data for second column, row 1 </TR> … </TABLE>
  • 16. More on Tables Common <TABLE> attributes: BORDER, CELLSPACING, CELLPADING, WIDTH e.g., <TABLE BORDER=4, WIDTH=50%> Use BORDER = 0 for no border (e.g., fancy layouts) Common <TD> attributes (most apply to <TR> also): BGCOLOR  set the colour of the cell ALIGN, CHAR, VALIGN  alignment within cell COLSPAN, ROWSPAN  to create “merged cells” e.g., <TD VALIGN=MIDDLE CHAR=“.”>
  • 17. Using table to do complex layouts Since a <TD> element may contain text, images, lists, links, etc., tables are often used to create complex page layouts! E.g. look at source for Joseph’s home page. Need to get good at using COLSPAN and ROWSPAN attributes.
  • 18. Using table to do complex layouts Best to layout table on paper or using Word first, then jot down COLSPAN and ROWSPAN values for any “merged cells” – write down sequence of <TR> & <TD> tags required. Warning : if you don’t design complex tables first, you will get confused and frustrated – guaranteed!