SlideShare a Scribd company logo

Web technologies: Lesson 2

•Download as PPTX, PDF•
•
N
nhepner

This document provides an overview of key topics in HTML and CSS including common tags, attributes, and syntax. It discusses HTML elements for text formatting, images, links, lists, tables, and divisions. It also covers the Document Object Model and how CSS is used to define presentation styles by selecting HTML elements. Common CSS properties, syntax, and hexadecimal color codes are explained.

Related slideshows

Html training slide
Html training slideHtml training slide
Html training slide
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
1 of 26
WEB TECHNOLOGIES: LESSON 2 UnallocatedSpace
Last Week at UAS…  Fundamentals of the web.  Languages of the web  Notepad “Hello World”  Slides are here: http://www.slideshare.net/nhepner/web- technologies-lesson-1
Today…  Editors  HTML  Review of tags  Attributes  Intro to basic HTML tags and usage  Discussion of the Document Object Model  CSS  How CSS relates to the DOM  Different CSS properties  References for CSS  Quick review of some CSS3 properties
A Quick Word on Editors…  Ignore Fanboys. Use what works for you.  Some, but not all editors…  VIM, Nano, emacs, notepad, SciTE  WYSIWYG Editors
Setting up a project  Create a project folder  Home page should be called “index.html”  May want to put images in “images” folder, CSS in “css” folder, javascript in “scripts” folder. Not required, but helps for organization.
Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in egestas metus. Etiam at libero diam, eu  Typesetting text, used pulvinar neque. Integer arcu enim, hendrerit in convallis in, porttitor sit amet magna. Ut feugiat lectus for testing and vel augue congue posuere. Mauris mollis nunc sit amet arcu dictum quis dignissim mauris tincidunt. generating content. Morbi et orci lectus, a lacinia tellus. In hac habitasse platea dictumst. Morbi quis nibh sed eros sagittis  http://lipsum.com pellentesque. Vivamus nisi metus, tincidunt id posuere sed, euismod auctor lectus. Cras blandit viverra dui ac interdum. Nulla pharetra ante vitae arcu dignissim a dapibus orci gravida. Duis pretium urna eget enim pellentesque consectetur. Aenean ultricies urna a felis lobortis fermentum. Nulla in tellus placerat justo tempus iaculis. Aliquam erat volutpat. Mauris mattis velit a eros ultricies in egestas enim hendrerit. Suspendisse non nibh mi. Sed ipsum mi, tincidunt vitae molestie ut, sodales vel lorem. Proin sodales lacinia risus vitae pharetra. In et iaculis tellus. Phasellus bibendum tristique mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla egestas sodales orci, eu euismod sapien egestas sit amet.
Last Week‟s Tags  <!DOCTYPE>  <html>  <head>  <title>  <body>
HTML Tags  What are tags?  Closing Tags  Comments  Multiple tags should be written as FILO – First In Last Out.  HTML ignores whitespace in most cases.
Tag Attributes  Provide properties to HTML tags.  Give the browser instructions on how to handle the HTML tag.  Listed within the tag itself  <img src=“example.gif” alt=“Example Image” />  You won‟t remember all the attributes. Use Google and http://w3schools.com for reference
HTML Comments  Comment is code that is ignored by the browser. Useful for making notes.  Can be helpful for marking off closing tags.  Comments can be multiple lines. 
Text Formatting  <strong>This text is bold</strong>  <em>This text is italic</em>  <u>This text is underlined</u> (deprecated)  Header tags  <h1>This is a large title tag</h1>  <h2>This is a subheader</h2>  <h3>Smaller header Tag</h3>  …  <h6>”smallest” header tag</h6>  <p>Starting a new paragraph</p>  <br /> tags to force a line break. No closing tag.  <span> for small, inline content edits.
Images  <img> tag  Requires “src” attribute.  “Height” and “width” attributes require special attention.  Crosslinking is bad. Try to host all images locally unless specific image hosting site.  No closing tags for images.
Anchor tags  <a>  Requires „href‟ attribute and link text  Examples  General use <a href=“about.html”>About Us</a>  Can be used with images <a href=“about.html”><img src=“about.gif” /></a>  Can link to remote URLs <a href=“http://www.google.com”>Google</a>  “Linking” is another overloaded term.
Relative Pathing vs. Absolute Pathing  Relative pathing means using a partial link, relative to the resource that‟s linking to it.  If „about.html‟ is in folder as „index.html‟, a link between them will just include the file name.  If „about.html‟ is in the „pages‟ folder of the project, the link from „index.html‟ will include the folder name „pages/about.html‟  In the above scenario, to link to a file in a parent folder, use „..‟ as the folder name – „../index.html‟. Can use as many times as necessary „../../../../../../index.html‟  Absolute pathing means using a full link to a resource.  Absolute pathing when linking to resources outside of your site.  Used to include external libraries.
Lists  <ol>Ordered lists</ol> are numbered lists  <ul>unordered lists<ul> are bullet points. I don‟t have a clever pneumonic device for this.  Comprised of <li>List Item</li> tags wrapped with either <ol> or <ul> tags.  Don‟t forget to close your list tag.  <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>  Can be used to create navigation if anchor tags are included in the list items.  Can nest lists within each other.
Tables  NOT to be used for positioning.  Comprised of many tags:  <table> Main table declaration.  <tr> Defines a table row  <td> Table rows are comprised of Table Data or table cells.  <th> Table header cell.  <thead>Define table headers. Still comprised of <tr> and <th> tags. Not a required tag, but helpful for browsers and spiders to identify content.  <tbody> Defines the main data section of a table. Same as above, not required.
Tables <table> • <td> tags contain “colspan” attribute. <thead> <tr> • Don‟t forget to close your tags!! <th>Title</th> <th>Author</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Flying on your own wings</td> <td>Chris Heintz</td> <td>$34.99</td> </tr> <tr> <td>Beginning Blender</td> <td>Lance Flavell</td> <td>$49.99</td> <tr> </tbody> </table>
Divs  Separators for content.  Very useful for content positioning.  Useful for building CSS selectors.
Nesting  Denotes a parent-child relationship  Nesting implies inheritance.  Lists, tables, divs – most HTML structures can be nested. (anchor tags cannot be nested).
HTML Selector attributes  Id attribute on elements that will only appear once on a page.  Class attribute on elements that require specific visual treatment  List items  Content regions
Document Object Model  Provides usable structure for manipulation and traversal of HTML documents by other languages and applications.  Relies on nesting and HTML Selector attributes to identify various page elements.
Cascading Style Sheets  Used to denote presentation. Basically, tells the browser how to treat HTML elements. Customizes HTML.  Include CSS files with the <link> tag.  Requires href, rel, and type attributes  <link href=“css/style.css” rel=“stylesheet” type=“text/css” />  Does not require closing tag  Much harder than it seems.
CSS Syntax  Requires Selector  Comments are contained within /* comment */  Curly Brackets to contain listed properties  Property name, followed by colon, followed by property value. End line with semi-colon. /* Styling for main menu */ #main-menu ul li { background-color: #003366; padding: 0; margin-left: 35px; }
Basic CSS Selectors  Uses the DOM to identify specific HTML components  To reference an ID in your HTML, prefix ID name with “#”  #main-menu  To reference a class in your HTML, prefix class with a period  .main-menu-item  HTML tags require no prefix  Can mix and match to create selectors – narrows specification.  #main-menu li  ul.menu li a.active
Hex Colors  http://www.w3schools.com/cssref/css_colorsfull.as p  Can use color names.  Two digits for Red, Blue, Green combination. Values for each digit can be 0-8, A-F. Better description here: http://www.w3schools.com/html/html_colors.asp  Create a commented list at the top of your document with colors and descriptors to help remember your color palette.
Reference  http://www.w3schools.com/html/default.asp  http://www.w3schools.com/html/html_css.asp

More Related Content

Web technologies: Lesson 2

  • 2. Last Week at UAS…  Fundamentals of the web.  Languages of the web  Notepad “Hello World”  Slides are here: http://www.slideshare.net/nhepner/web- technologies-lesson-1
  • 3. Today…  Editors  HTML  Review of tags  Attributes  Intro to basic HTML tags and usage  Discussion of the Document Object Model  CSS  How CSS relates to the DOM  Different CSS properties  References for CSS  Quick review of some CSS3 properties
  • 4. A Quick Word on Editors…  Ignore Fanboys. Use what works for you.  Some, but not all editors…  VIM, Nano, emacs, notepad, SciTE  WYSIWYG Editors
  • 5. Setting up a project  Create a project folder  Home page should be called “index.html”  May want to put images in “images” folder, CSS in “css” folder, javascript in “scripts” folder. Not required, but helps for organization.
  • 6. Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in egestas metus. Etiam at libero diam, eu  Typesetting text, used pulvinar neque. Integer arcu enim, hendrerit in convallis in, porttitor sit amet magna. Ut feugiat lectus for testing and vel augue congue posuere. Mauris mollis nunc sit amet arcu dictum quis dignissim mauris tincidunt. generating content. Morbi et orci lectus, a lacinia tellus. In hac habitasse platea dictumst. Morbi quis nibh sed eros sagittis  http://lipsum.com pellentesque. Vivamus nisi metus, tincidunt id posuere sed, euismod auctor lectus. Cras blandit viverra dui ac interdum. Nulla pharetra ante vitae arcu dignissim a dapibus orci gravida. Duis pretium urna eget enim pellentesque consectetur. Aenean ultricies urna a felis lobortis fermentum. Nulla in tellus placerat justo tempus iaculis. Aliquam erat volutpat. Mauris mattis velit a eros ultricies in egestas enim hendrerit. Suspendisse non nibh mi. Sed ipsum mi, tincidunt vitae molestie ut, sodales vel lorem. Proin sodales lacinia risus vitae pharetra. In et iaculis tellus. Phasellus bibendum tristique mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla egestas sodales orci, eu euismod sapien egestas sit amet.
  • 7. Last Week‟s Tags  <!DOCTYPE>  <html>  <head>  <title>  <body>
  • 8. HTML Tags  What are tags?  Closing Tags  Comments  Multiple tags should be written as FILO – First In Last Out.  HTML ignores whitespace in most cases.
  • 9. Tag Attributes  Provide properties to HTML tags.  Give the browser instructions on how to handle the HTML tag.  Listed within the tag itself  <img src=“example.gif” alt=“Example Image” />  You won‟t remember all the attributes. Use Google and http://w3schools.com for reference
  • 10. HTML Comments  Comment is code that is ignored by the browser. Useful for making notes.  Can be helpful for marking off closing tags.  Comments can be multiple lines.  <!-- Any Text in here is comment -->
  • 11. Text Formatting  <strong>This text is bold</strong>  <em>This text is italic</em>  <u>This text is underlined</u> (deprecated)  Header tags  <h1>This is a large title tag</h1>  <h2>This is a subheader</h2>  <h3>Smaller header Tag</h3>  …  <h6>”smallest” header tag</h6>  <p>Starting a new paragraph</p>  <br /> tags to force a line break. No closing tag.  <span> for small, inline content edits.
  • 12. Images  <img> tag  Requires “src” attribute.  “Height” and “width” attributes require special attention.  Crosslinking is bad. Try to host all images locally unless specific image hosting site.  No closing tags for images.
  • 13. Anchor tags  <a>  Requires „href‟ attribute and link text  Examples  General use <a href=“about.html”>About Us</a>  Can be used with images <a href=“about.html”><img src=“about.gif” /></a>  Can link to remote URLs <a href=“http://www.google.com”>Google</a>  “Linking” is another overloaded term.
  • 14. Relative Pathing vs. Absolute Pathing  Relative pathing means using a partial link, relative to the resource that‟s linking to it.  If „about.html‟ is in folder as „index.html‟, a link between them will just include the file name.  If „about.html‟ is in the „pages‟ folder of the project, the link from „index.html‟ will include the folder name „pages/about.html‟  In the above scenario, to link to a file in a parent folder, use „..‟ as the folder name – „../index.html‟. Can use as many times as necessary „../../../../../../index.html‟  Absolute pathing means using a full link to a resource.  Absolute pathing when linking to resources outside of your site.  Used to include external libraries.
  • 15. Lists  <ol>Ordered lists</ol> are numbered lists  <ul>unordered lists<ul> are bullet points. I don‟t have a clever pneumonic device for this.  Comprised of <li>List Item</li> tags wrapped with either <ol> or <ul> tags.  Don‟t forget to close your list tag.  <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>  Can be used to create navigation if anchor tags are included in the list items.  Can nest lists within each other.
  • 16. Tables  NOT to be used for positioning.  Comprised of many tags:  <table> Main table declaration.  <tr> Defines a table row  <td> Table rows are comprised of Table Data or table cells.  <th> Table header cell.  <thead>Define table headers. Still comprised of <tr> and <th> tags. Not a required tag, but helpful for browsers and spiders to identify content.  <tbody> Defines the main data section of a table. Same as above, not required.
  • 17. Tables <table> • <td> tags contain “colspan” attribute. <thead> <!-- not required, just organizational --> <tr> • Don‟t forget to close your tags!! <th>Title</th> <th>Author</th> <th>Price</th> </tr> </thead> <tbody> <!-- also not required --> <tr> <td>Flying on your own wings</td> <td>Chris Heintz</td> <td>$34.99</td> </tr> <tr> <td>Beginning Blender</td> <td>Lance Flavell</td> <td>$49.99</td> <tr> </tbody> </table>
  • 18. Divs  Separators for content.  Very useful for content positioning.  Useful for building CSS selectors.
  • 19. Nesting  Denotes a parent-child relationship  Nesting implies inheritance.  Lists, tables, divs – most HTML structures can be nested. (anchor tags cannot be nested).
  • 20. HTML Selector attributes  Id attribute on elements that will only appear once on a page.  Class attribute on elements that require specific visual treatment  List items  Content regions
  • 21. Document Object Model  Provides usable structure for manipulation and traversal of HTML documents by other languages and applications.  Relies on nesting and HTML Selector attributes to identify various page elements.
  • 22. Cascading Style Sheets  Used to denote presentation. Basically, tells the browser how to treat HTML elements. Customizes HTML.  Include CSS files with the <link> tag.  Requires href, rel, and type attributes  <link href=“css/style.css” rel=“stylesheet” type=“text/css” />  Does not require closing tag  Much harder than it seems.
  • 23. CSS Syntax  Requires Selector  Comments are contained within /* comment */  Curly Brackets to contain listed properties  Property name, followed by colon, followed by property value. End line with semi-colon. /* Styling for main menu */ #main-menu ul li { background-color: #003366; padding: 0; margin-left: 35px; }
  • 24. Basic CSS Selectors  Uses the DOM to identify specific HTML components  To reference an ID in your HTML, prefix ID name with “#”  #main-menu  To reference a class in your HTML, prefix class with a period  .main-menu-item  HTML tags require no prefix  Can mix and match to create selectors – narrows specification.  #main-menu li  ul.menu li a.active
  • 25. Hex Colors  http://www.w3schools.com/cssref/css_colorsfull.as p  Can use color names.  Two digits for Red, Blue, Green combination. Values for each digit can be 0-8, A-F. Better description here: http://www.w3schools.com/html/html_colors.asp  Create a commented list at the top of your document with colors and descriptors to help remember your color palette.
  • 26. Reference  http://www.w3schools.com/html/default.asp  http://www.w3schools.com/html/html_css.asp