SlideShare a Scribd company logo
1 of 20
Hello World
- and save as hello.html
Assingment 1-1
• Make a folder and name it 'lecture1'.
• Make a folder and name it ‘Assingment1-1'.
• Open a text-editor
– Windows => notepad
– ios => TextEdit as an HTML or Plain Text Editor
(setup http://support.apple.com/kb/TA20406)
• Type ”Hello World” and save it as hello.html
• Open hello.html
HTML5 minimum
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8">
<title>HTML5</title>
</head>
<body>
<h1>Hello world</h1>
<p>In the right HTML5 way.</p>
<p>...nice</p>
</body>
</html>
HTML structur
More HTML Elements (tags)
<a href=”http://www.46h.dk”>Link</a>
<img src=” images/mc.jpg” alt=”MC” />
<!-- comments -->
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
more at http://www.w3schools.com/html/html_quick.asp
File structure
<img src=” images/my_pic.jpg” alt=”Me” />
(home) Assingment 1-2
Go to Codecademy.com and sign up.
Go to http://www.codecademy.com/tracks/web
and complete 'HTML Fundamentals'.
Assingment 1-3
• Make a folder and name it ‘Assingment1-3'.
• Make a webpage (index.html) that present
one of your interests with headings, little text
(from lipsum.com) and a few images.
• Make a subpage (page2.html)
• Make link between the to pages
• Use <h1><h2><p><ul><li><img><a>
• Make comments for every line of code
Validating
The World Wide Web Consortium (W3C) is an
international community that develops
open standards to ensure the long-term growth
of the Web.
http://www.w3.org/
Assingment 1-4
• Validate your pages at www.w3.org
• If there are any errors please correct them
CSS
The CSS Zen Garden -
http://www.csszengarden.com/
CSS Selectores
body {
background-color:#cccccc;
}
h1 {
color:green;
}
p {
margin-left:50px;
color:#ff0000;
}
Internal style sheet
<head>
....
<style>
body {
background-color:#cccccc;
}
h1 {
color:green;
}
p {
margin-left:50px;
color:#ff0000;
}
</style>
</head>
External style sheet
<head>
<link rel="stylesheet"
type="text/css" href=“css.css">
</head>
body {background-color:#cccccc;}
h1 {color:green;}
p {margin-left:50px;
color:#ff0000;}
css.css
index.html
Inline style
• <p style="color: green; margin-left: 20px">This
is a paragraph.</p>
(home) Assingment
Go to http://www.codecademy.com/tracks/web
and complete course 4:
Advanced CSS Selectors
Assingment 1-5
From assingment1-3 folder copy index, page2
and your images-folder to a new folder named
assigment1-5.
For index and page2 you have to make:
• External style sheet
• Internal style sheet
• Inline style sheet
• Validate HTML and CSS
Chrome
as webdeveloper tool
Online resourcer
• www.w3schools.com
• www.lynda.com
• www.w3.org
• http://google-
styleguide.googlecode.com/svn/trunk/htmlcss
guide.xml
• www.lipsum.com
• www.flickr.com

More Related Content

What's hot

Slidecarol.html
Slidecarol.htmlSlidecarol.html
Slidecarol.htmlLeda0401
 
Web designing workshop
Web designing workshopWeb designing workshop
Web designing workshopkanakiyajay
 
Miami media-party-html-css
Miami media-party-html-cssMiami media-party-html-css
Miami media-party-html-cssRachel Schallom
 
Browser Mechanics & CSS
Browser Mechanics & CSSBrowser Mechanics & CSS
Browser Mechanics & CSSLara Schenck
 
Website slides
Website slidesWebsite slides
Website slidesComm3
 
Towards an Alternate WordPress Theme Structure
Towards an Alternate WordPress Theme StructureTowards an Alternate WordPress Theme Structure
Towards an Alternate WordPress Theme StructureGraham Armfield
 
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012WordCamp Sydney
 
Your website is only as safe as your last good backup
Your website is only as safe as your last good backupYour website is only as safe as your last good backup
Your website is only as safe as your last good backupTerri Orlowski
 
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)Jazkarta, Inc.
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short introjeiseman
 
Web Development Workshop (Front End)
Web Development Workshop (Front End)Web Development Workshop (Front End)
Web Development Workshop (Front End)DSCIIITLucknow
 
A11y Conference Talk: Building an Accessible WordPress Theme
A11y Conference Talk: Building an Accessible WordPress ThemeA11y Conference Talk: Building an Accessible WordPress Theme
A11y Conference Talk: Building an Accessible WordPress ThemeTomAuger
 

What's hot (20)

Slidecarol.html
Slidecarol.htmlSlidecarol.html
Slidecarol.html
 
Rails sopinoffs - Haml
Rails sopinoffs - HamlRails sopinoffs - Haml
Rails sopinoffs - Haml
 
The web context
The web contextThe web context
The web context
 
Web designing workshop
Web designing workshopWeb designing workshop
Web designing workshop
 
Web design
Web designWeb design
Web design
 
6.copy text
6.copy text6.copy text
6.copy text
 
Miami media-party-html-css
Miami media-party-html-cssMiami media-party-html-css
Miami media-party-html-css
 
Demo lecture ppt
Demo lecture pptDemo lecture ppt
Demo lecture ppt
 
Browser Mechanics & CSS
Browser Mechanics & CSSBrowser Mechanics & CSS
Browser Mechanics & CSS
 
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
 
Website slides
Website slidesWebsite slides
Website slides
 
Towards an Alternate WordPress Theme Structure
Towards an Alternate WordPress Theme StructureTowards an Alternate WordPress Theme Structure
Towards an Alternate WordPress Theme Structure
 
Meeting 01
Meeting 01Meeting 01
Meeting 01
 
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
 
Your website is only as safe as your last good backup
Your website is only as safe as your last good backupYour website is only as safe as your last good backup
Your website is only as safe as your last good backup
 
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short intro
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 
Web Development Workshop (Front End)
Web Development Workshop (Front End)Web Development Workshop (Front End)
Web Development Workshop (Front End)
 
A11y Conference Talk: Building an Accessible WordPress Theme
A11y Conference Talk: Building an Accessible WordPress ThemeA11y Conference Talk: Building an Accessible WordPress Theme
A11y Conference Talk: Building an Accessible WordPress Theme
 

Viewers also liked

The way gender is constructed for an individual depend on gendered interactio...
The way gender is constructed for an individual depend on gendered interactio...The way gender is constructed for an individual depend on gendered interactio...
The way gender is constructed for an individual depend on gendered interactio...Mis T Masiapeto
 
S davis bblteurpoe2012_videofeedback
S davis bblteurpoe2012_videofeedbackS davis bblteurpoe2012_videofeedback
S davis bblteurpoe2012_videofeedbackSimon Davis
 
Clp 1040 what is a documentary
Clp 1040   what is a documentaryClp 1040   what is a documentary
Clp 1040 what is a documentaryCivic Life Project
 
Ancient Civilization
Ancient CivilizationAncient Civilization
Ancient Civilizationnoctor
 
Clp keynote presentation 090113
Clp keynote presentation 090113Clp keynote presentation 090113
Clp keynote presentation 090113Civic Life Project
 
Civic Life Project School presentation 090313
Civic Life Project School presentation 090313Civic Life Project School presentation 090313
Civic Life Project School presentation 090313Civic Life Project
 

Viewers also liked (8)

Lesson 2
Lesson 2 Lesson 2
Lesson 2
 
íDolos
íDolosíDolos
íDolos
 
The way gender is constructed for an individual depend on gendered interactio...
The way gender is constructed for an individual depend on gendered interactio...The way gender is constructed for an individual depend on gendered interactio...
The way gender is constructed for an individual depend on gendered interactio...
 
S davis bblteurpoe2012_videofeedback
S davis bblteurpoe2012_videofeedbackS davis bblteurpoe2012_videofeedback
S davis bblteurpoe2012_videofeedback
 
Clp 1040 what is a documentary
Clp 1040   what is a documentaryClp 1040   what is a documentary
Clp 1040 what is a documentary
 
Ancient Civilization
Ancient CivilizationAncient Civilization
Ancient Civilization
 
Clp keynote presentation 090113
Clp keynote presentation 090113Clp keynote presentation 090113
Clp keynote presentation 090113
 
Civic Life Project School presentation 090313
Civic Life Project School presentation 090313Civic Life Project School presentation 090313
Civic Life Project School presentation 090313
 

Similar to HTML5 Hello World Assignment - Create Basic HTML Page with Heading and Paragraph

What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
 
HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basicsJames VanDyke
 
basic introduction of html tags
basic introduction  of html tagsbasic introduction  of html tags
basic introduction of html tagsManish jariyal
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSdanpaquette
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205志宇 許
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)actanimation
 
If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!Dr Sukhpal Singh Gill
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Erin M. Kidwell
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3Anjan Mahanta
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3Anjan Mahanta
 

Similar to HTML5 Hello World Assignment - Create Basic HTML Page with Heading and Paragraph (20)

HTML 5 Tutorial
HTML 5 TutorialHTML 5 Tutorial
HTML 5 Tutorial
 
WTL1HTML-TEXT.ppt
WTL1HTML-TEXT.pptWTL1HTML-TEXT.ppt
WTL1HTML-TEXT.ppt
 
An-Introduction-to-HTML
An-Introduction-to-HTMLAn-Introduction-to-HTML
An-Introduction-to-HTML
 
Html and its tags
Html and its tagsHtml and its tags
Html and its tags
 
Web htmlt1
Web   htmlt1Web   htmlt1
Web htmlt1
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basics
 
basic introduction of html tags
basic introduction  of html tagsbasic introduction  of html tags
basic introduction of html tags
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205
 
Web 101 intro to html
Web 101  intro to htmlWeb 101  intro to html
Web 101 intro to html
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
 
If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!
 
HTML Intro
HTML IntroHTML Intro
HTML Intro
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3
 
Html
HtmlHtml
Html
 
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3
 

Recently uploaded

Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 

Recently uploaded (20)

Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 

HTML5 Hello World Assignment - Create Basic HTML Page with Heading and Paragraph

  • 1. Hello World - and save as hello.html
  • 2. Assingment 1-1 • Make a folder and name it 'lecture1'. • Make a folder and name it ‘Assingment1-1'. • Open a text-editor – Windows => notepad – ios => TextEdit as an HTML or Plain Text Editor (setup http://support.apple.com/kb/TA20406) • Type ”Hello World” and save it as hello.html • Open hello.html
  • 3.
  • 4. HTML5 minimum <!DOCTYPE html> <html> <head> <meta charset=”UTF-8"> <title>HTML5</title> </head> <body> <h1>Hello world</h1> <p>In the right HTML5 way.</p> <p>...nice</p> </body> </html>
  • 6. More HTML Elements (tags) <a href=”http://www.46h.dk”>Link</a> <img src=” images/mc.jpg” alt=”MC” /> <!-- comments --> <ul> <li>Coffee</li> <li>Milk</li> </ul> more at http://www.w3schools.com/html/html_quick.asp
  • 7. File structure <img src=” images/my_pic.jpg” alt=”Me” />
  • 8. (home) Assingment 1-2 Go to Codecademy.com and sign up. Go to http://www.codecademy.com/tracks/web and complete 'HTML Fundamentals'.
  • 9. Assingment 1-3 • Make a folder and name it ‘Assingment1-3'. • Make a webpage (index.html) that present one of your interests with headings, little text (from lipsum.com) and a few images. • Make a subpage (page2.html) • Make link between the to pages • Use <h1><h2><p><ul><li><img><a> • Make comments for every line of code
  • 10. Validating The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. http://www.w3.org/
  • 11. Assingment 1-4 • Validate your pages at www.w3.org • If there are any errors please correct them
  • 12. CSS The CSS Zen Garden - http://www.csszengarden.com/
  • 13. CSS Selectores body { background-color:#cccccc; } h1 { color:green; } p { margin-left:50px; color:#ff0000; }
  • 14. Internal style sheet <head> .... <style> body { background-color:#cccccc; } h1 { color:green; } p { margin-left:50px; color:#ff0000; } </style> </head>
  • 15. External style sheet <head> <link rel="stylesheet" type="text/css" href=“css.css"> </head> body {background-color:#cccccc;} h1 {color:green;} p {margin-left:50px; color:#ff0000;} css.css index.html
  • 16. Inline style • <p style="color: green; margin-left: 20px">This is a paragraph.</p>
  • 17. (home) Assingment Go to http://www.codecademy.com/tracks/web and complete course 4: Advanced CSS Selectors
  • 18. Assingment 1-5 From assingment1-3 folder copy index, page2 and your images-folder to a new folder named assigment1-5. For index and page2 you have to make: • External style sheet • Internal style sheet • Inline style sheet • Validate HTML and CSS
  • 20. Online resourcer • www.w3schools.com • www.lynda.com • www.w3.org • http://google- styleguide.googlecode.com/svn/trunk/htmlcss guide.xml • www.lipsum.com • www.flickr.com