SlideShare a Scribd company logo
5
Most read
16
Most read
19
Most read
(Fast) Introduction to HTML & CSSDave Kelly ( @davkell  )for @091Labs
What are HTML & CSS?HTML structures documents on the webTells browser what content is (not what it means)CSS = presentation (how things look)JavaScript adds interaction / behavioursPeanut lifted from http://www.alistapart.com/articles/understandingprogressiveenhancement/Why separate?http://www.ambientage.com/blog/091labs : 1
Standards.... define the mark-up you use tell the browser what to do with itHTML 4.01 (Don’t use)xHTML1.0Frameset  (nope)Transitional  (nope)Strict	*HTML5 (New. Not fully supported / implemented. It’s the future.)All those defined standards....do all browsers work the same?
ToolsFirefox (wide support for standards)Firebug (Firefox add-on, Chrome also, but weak). Your best friend with front-end web dev.Web Developer Toolbar (Firefox add-on)ValidatorsHTML: http://validator.w3.orgCSS: http://jigsaw.w3.orgDevelopment environmentNetbeans / Aptana for me.... Your choice (not WYSIWYG!!)(My) Development processFirefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?)Browsershots.orghttp://www.ambientage.com/blog/091labs : 2
HTMLMade up of “tags”  (elements)<h1>I’m an important heading</h1> (Heading level 1)  <img src=”images/myprofilepic.jpg” alt=”It’s a picture of me!!” /> (Image tag)Elements can contain plain text, other elements, or bothNo state / no logic (Mark-up content only, not programming)xHTML Strict elements...must be properly nestedmust be closedmust be lower caseattributes must have a value
HTML TagsTags are usually paired (e.g..., <h1> and </h1>) Some elements are “self-closing” e.g. <br /> <img … />Some elements may include attributes, (additional information that is included inside the start tag).Every HTML document contains standard tags. Each document consists of a head and body The head contains the title (and more…), and The body contains the actual text that is made up of paragraphs, lists, images, and other elements
Simple HTML Examplehttp://www.ambientage.com/blog/091labs : 3
Some HTML tag examplesHeadings
 <h1></h1>  , <h2> </h2> ……  <h6> </h6>
Paragraph: <p>Some text </p>
Lists
 Ordered List <ol> <li>I’m a list item</li></ol>
 Unordered list <ul>  <li>I’m a list item</li> </ul>
Document Section <div></div>   (Important for page layouts!)
Image <img src=“../images/mypic.jpg” alt=“My Picture” title=“It’s me!” />
Links <a href=“http://www.google.com”>Google</a>
Table  <table><tr><td>table cell</td></tr>                          <tr><td>second row cell</td></tr>             </table>http://www.ambientage.com/blog/091labs : 4 & 5
Some HTML attribute examplesHTML tags can have attributes => give some more info about the tag
Most can have:<h1 id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1>
HTML FormsForms are used to accept information from the Web page userForms can use text boxes, password boxes, check boxes, radio buttons, text areas, drop-down lists, hidden fields, as well as Submit and Clear buttons.To create a form, the <form></form> element is used.Forms have 2 basic attributes: action & method, e.g., <form name=“myForm” action=“processPage.php” method=“post”>action = “where’s the data going?”method = “how’s it getting there? (post vs get)”
HTML Forms
HTML Forms
CSS (Cascading Style Sheets)Handles presentation of web page

More Related Content

What's hot (20)

PPTX
html-css
Dhirendra Chauhan
 
PDF
Introduction to HTML and CSS
Mario Hernandez
 
PPTX
css.ppt
bhasula
 
PDF
CSS3 Media Queries
Russ Weakley
 
PDF
Introduction to HTML5
Gil Fink
 
PPT
Html & Css presentation
joilrahat
 
PPTX
HTML Fundamentals
BG Java EE Course
 
PPTX
Html
Nisa Soomro
 
PPT
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
PPTX
Css position
Webtech Learning
 
PPTX
Html5 tutorial for beginners
Singsys Pte Ltd
 
PPTX
HTML-(workshop)7557.pptx
Raja980775
 
PDF
HTML & CSS Masterclass
Bernardo Raposo
 
PDF
Html / CSS Presentation
Shawn Calvert
 
PPTX
Basic HTML
Sayan De
 
PPTX
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
PPT
CSS Basics
WordPress Memphis
 
PPTX
Html
yugank_gupta
 
PPTX
Html ppt
Ruchi Kumari
 
PPTX
Cascading style sheets (CSS)
Harshita Yadav
 
Introduction to HTML and CSS
Mario Hernandez
 
css.ppt
bhasula
 
CSS3 Media Queries
Russ Weakley
 
Introduction to HTML5
Gil Fink
 
Html & Css presentation
joilrahat
 
HTML Fundamentals
BG Java EE Course
 
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Css position
Webtech Learning
 
Html5 tutorial for beginners
Singsys Pte Ltd
 
HTML-(workshop)7557.pptx
Raja980775
 
HTML & CSS Masterclass
Bernardo Raposo
 
Html / CSS Presentation
Shawn Calvert
 
Basic HTML
Sayan De
 
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
CSS Basics
WordPress Memphis
 
Html ppt
Ruchi Kumari
 
Cascading style sheets (CSS)
Harshita Yadav
 

Viewers also liked (11)

PPTX
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
PPT
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
PDF
Html5 i css3
Squiz Poland
 
PDF
HTML with a little CSS
Basia Madej
 
PDF
HTML5 and CSS3 Refresher
Ivano Malavolta
 
PPTX
Presentation about html5 css3
Gopi A
 
PPTX
Introduction to HTML5 & CSS3
Pradeep Varadaraja Banavara
 
PPTX
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
PPTX
HTML5 & CSS3
Ian Lintner
 
PPT
Introduction to HTML
MayaLisa
 
PPT
Web Development using HTML & CSS
Shashank Skills Academy
 
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Html5 i css3
Squiz Poland
 
HTML with a little CSS
Basia Madej
 
HTML5 and CSS3 Refresher
Ivano Malavolta
 
Presentation about html5 css3
Gopi A
 
Introduction to HTML5 & CSS3
Pradeep Varadaraja Banavara
 
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
HTML5 & CSS3
Ian Lintner
 
Introduction to HTML
MayaLisa
 
Web Development using HTML & CSS
Shashank Skills Academy
 
Ad

Similar to (Fast) Introduction to HTML & CSS (20)

PPTX
Markup Documents
Steven Cahill
 
PPT
Supplement web design
shelly3160
 
PPS
Web Designing
VNIT-ACM Student Chapter
 
PPTX
Html, CSS & Web Designing
Leslie Steele
 
PPT
Cascading Style Sheets
Marc Steel
 
PPTX
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
PPT
HTML & CSS Workshop Notes
Pamela Fox
 
PPT
XHTML and CSS
peak3
 
PPT
Html xhtml css
L15338
 
PDF
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3
Salvatore Iaconesi
 
PPT
CSS Part I
Doncho Minkov
 
PPTX
Html n CSS
Sukrit Gupta
 
PDF
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Patrick Lauke
 
PPTX
DHTML
Ravinder Kamboj
 
PPT
Lecture 4
uccwebcourses
 
PPT
Semantically Correct And Standards Compliance Html
sanjay2211
 
PPT
xhtml_css.ppt
fakeaccount225095
 
ODP
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
PPT
HTML & CSS.ppt
vaseemshaik21
 
Markup Documents
Steven Cahill
 
Supplement web design
shelly3160
 
Html, CSS & Web Designing
Leslie Steele
 
Cascading Style Sheets
Marc Steel
 
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
HTML & CSS Workshop Notes
Pamela Fox
 
XHTML and CSS
peak3
 
Html xhtml css
L15338
 
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3
Salvatore Iaconesi
 
CSS Part I
Doncho Minkov
 
Html n CSS
Sukrit Gupta
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Patrick Lauke
 
Lecture 4
uccwebcourses
 
Semantically Correct And Standards Compliance Html
sanjay2211
 
xhtml_css.ppt
fakeaccount225095
 
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
HTML & CSS.ppt
vaseemshaik21
 
Ad

Recently uploaded (20)

DOCX
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
PDF
UiPath Agentic AI ile Akıllı Otomasyonun Yeni Çağı
UiPathCommunity
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
PDF
Database Benchmarking for Performance Masterclass: Session 1 - Benchmarking F...
ScyllaDB
 
PDF
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
PDF
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
PDF
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
PPTX
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
PDF
Why aren't you using FME Flow's CPU Time?
Safe Software
 
PDF
Open Source Milvus Vector Database v 2.6
Zilliz
 
PDF
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
PDF
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
PDF
From Chatbot to Destroyer of Endpoints - Can ChatGPT Automate EDR Bypasses (1...
Priyanka Aash
 
PPTX
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
PPTX
reInforce 2025 Lightning Talk - Scott Francis.pptx
ScottFrancis51
 
PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
PDF
FME as an Orchestration Tool with Principles From Data Gravity
Safe Software
 
PPTX
Simplifica la seguridad en la nube y la detección de amenazas con FortiCNAPP
Cristian Garcia G.
 
PPTX
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
PPTX
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
UiPath Agentic AI ile Akıllı Otomasyonun Yeni Çağı
UiPathCommunity
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
Database Benchmarking for Performance Masterclass: Session 1 - Benchmarking F...
ScyllaDB
 
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
Why aren't you using FME Flow's CPU Time?
Safe Software
 
Open Source Milvus Vector Database v 2.6
Zilliz
 
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
From Chatbot to Destroyer of Endpoints - Can ChatGPT Automate EDR Bypasses (1...
Priyanka Aash
 
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
reInforce 2025 Lightning Talk - Scott Francis.pptx
ScottFrancis51
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
FME as an Orchestration Tool with Principles From Data Gravity
Safe Software
 
Simplifica la seguridad en la nube y la detección de amenazas con FortiCNAPP
Cristian Garcia G.
 
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 

(Fast) Introduction to HTML & CSS

  • 1. (Fast) Introduction to HTML & CSSDave Kelly ( @davkell )for @091Labs
  • 2. What are HTML & CSS?HTML structures documents on the webTells browser what content is (not what it means)CSS = presentation (how things look)JavaScript adds interaction / behavioursPeanut lifted from http://www.alistapart.com/articles/understandingprogressiveenhancement/Why separate?http://www.ambientage.com/blog/091labs : 1
  • 3. Standards.... define the mark-up you use tell the browser what to do with itHTML 4.01 (Don’t use)xHTML1.0Frameset (nope)Transitional (nope)Strict *HTML5 (New. Not fully supported / implemented. It’s the future.)All those defined standards....do all browsers work the same?
  • 4. ToolsFirefox (wide support for standards)Firebug (Firefox add-on, Chrome also, but weak). Your best friend with front-end web dev.Web Developer Toolbar (Firefox add-on)ValidatorsHTML: http://validator.w3.orgCSS: http://jigsaw.w3.orgDevelopment environmentNetbeans / Aptana for me.... Your choice (not WYSIWYG!!)(My) Development processFirefox -> Webkit (chrome / safari) -> IE8 -> IE7 -> (IE6?)Browsershots.orghttp://www.ambientage.com/blog/091labs : 2
  • 5. HTMLMade up of “tags”  (elements)<h1>I’m an important heading</h1> (Heading level 1)  <img src=”images/myprofilepic.jpg” alt=”It’s a picture of me!!” /> (Image tag)Elements can contain plain text, other elements, or bothNo state / no logic (Mark-up content only, not programming)xHTML Strict elements...must be properly nestedmust be closedmust be lower caseattributes must have a value
  • 6. HTML TagsTags are usually paired (e.g..., <h1> and </h1>) Some elements are “self-closing” e.g. <br /> <img … />Some elements may include attributes, (additional information that is included inside the start tag).Every HTML document contains standard tags. Each document consists of a head and body The head contains the title (and more…), and The body contains the actual text that is made up of paragraphs, lists, images, and other elements
  • 8. Some HTML tag examplesHeadings
  • 9. <h1></h1> , <h2> </h2> …… <h6> </h6>
  • 11. Lists
  • 12. Ordered List <ol> <li>I’m a list item</li></ol>
  • 13. Unordered list <ul> <li>I’m a list item</li> </ul>
  • 14. Document Section <div></div> (Important for page layouts!)
  • 15. Image <img src=“../images/mypic.jpg” alt=“My Picture” title=“It’s me!” />
  • 17. Table <table><tr><td>table cell</td></tr> <tr><td>second row cell</td></tr> </table>http://www.ambientage.com/blog/091labs : 4 & 5
  • 18. Some HTML attribute examplesHTML tags can have attributes => give some more info about the tag
  • 19. Most can have:<h1 id=“mainHeading” class=“myHeadingClass” title=“Website title” style=“color: #000000;”>My Heading</h1>
  • 20. HTML FormsForms are used to accept information from the Web page userForms can use text boxes, password boxes, check boxes, radio buttons, text areas, drop-down lists, hidden fields, as well as Submit and Clear buttons.To create a form, the <form></form> element is used.Forms have 2 basic attributes: action & method, e.g., <form name=“myForm” action=“processPage.php” method=“post”>action = “where’s the data going?”method = “how’s it getting there? (post vs get)”
  • 23. CSS (Cascading Style Sheets)Handles presentation of web page
  • 24. It allows document authors to specify the look of a web page (e.g. fonts, spacing, margins,etc.) separately from the structure of the web page (e.g. body, text, links, etc.)
  • 25. There are 3 ways document styles can be defined: 1. Inline (No!)2. Internal (ehhhm….no)External (Yes!)Concept of the “Cascade”
  • 26. If a duplicate style is declared, it “cascades” through various layers, each overriding the previous…The CascadeThe LayersUser agent settings (default browser styles - user is usually able to modify some of these)Any External (Linked) style sheets (.css file)Any Internal styles (in head section inside <style> tags)Inline Styles (in the style attribute of an element)Each level of style overrides the previous level where duplicate properties are definedCreating Style RulesThere are 2 pieces to each rule:
  • 27. The Selector ~ tells the rule what elements it should apply to
  • 28. The Rule ~ does the formatting of the element
  • 29. Made up of a property:value pair
  • 30. The formatting of rules: Selector { property1: value1;property2: value2; propertyN: valueN;}http://www.ambientage.com/blog/091labs : 6
  • 31. Selectors: Match by ElementEasiest selector method is to use an element name, e.g.
  • 32. p { color: #000000; }
  • 33. Doing this causes all the tags of that name (i.e.<p>) to be formatted according to the style rule declared.
  • 34. Possible to do this for multiple elements
  • 35. h1, h2, h5, p { colour: #ff0000;}Selectors: Match by ClassUsed to display elements of the same type in different ways, e.g.
  • 36. If the page you’re working with has 2 colours in its background, you need to put light text on the dark background, and dark text on the light background
  • 37. Classes are defined using a dot (.) and a given name, e.g.
  • 39. To use the class in the document:
  • 40. <p class=“lightText”>This is white text</p>Selectors: Match by IdentifierUsed to display a specific element in a different way, e.g.
  • 41. If you need an element on a page presented in a particular way, you can use an Identifier (remember an element’s id attribute is unique to a page)
  • 42. Identifiers are defined using a hash (#) and a given name, e.g.
  • 43. #siteTitle{ font-family: ‘Times New Roman’, serif}
  • 44. To use the class in the document:
  • 45. <h1 id=“siteTitle”>My Site Name</h1>Inline Style Rules…only apply to the current element…Overrides other styles if duplicates declared (because of the cascade)Maintenance nightmare
  • 46. Internal Style Rules…only apply to the current page…still slightly nightmarish to maintain
  • 47. External Style Sheets (.css)These allow you to…
  • 48. customise & alter the look of multiple web pages
  • 49. ensure continuity of design throughout the website
  • 50. To link an external style sheet to a HTML page use the <link> tag in the <head> section of the document, e.g.http://www.ambientage.com/blog/091labs : 7
  • 51. Link StylesPseudo-classes are identifiers understood by the browser to apply to a subset of elements, without the element needing to be explicitly tagged with the styleQuestions?Get in touch… dkelly@ambientage.com