SlideShare a Scribd company logo
Hello World
- and save as hello.html
Assingment 1-1
• Make a folder and name it 'lecture1'.
• 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="ISO-8859-1">
<title>HTML5</title>
</head>
<body>
<h1>Hello world</h1>
<p>In the right HTML5 way.</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
(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 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
CSS
The CSS Zen Garden -
http://www.csszengarden.com/
CSS Selectores
HTML Block elements => h1..h6, p, div, span, ul, li, …
HTML Inline elements => a, img, hr
And the id and class Selectors
#para1 { //id selestor
text-align:center;
color:red;
}
.center { //class selector
text-align:center;
}
HTML Grouping elements
• <div></div>
– The HTML <div> element is a block level element that can be
used as a container for grouping other HTML elements.
– The <div> element has no special meaning. Except that,
because it is a block level element, the browser will display a
line break before and after it.
– When used together with CSS, the <div> element can be used to
set style attributes to large blocks of content.
• <span></span>
– The <span> tag is used to group inline-elements in a document.
– The <span> tag provides no visual change by itself.
– The <span> tag provides a way to add a hook to a part of a text
or a part of a document.
– When used together with CSS, the <span> element can be used
to set style attributes to parts of the text.
Internal style sheet
<head>
<style>
body {
background-image:url("images/mc.jpg");
}
h1 {
color:green;
}
p {
margin-left:20px;
color:#ff0000;
}
</style>
</head>
External style sheet
<head>
<link rel="stylesheet"
type="text/css" href=“css.css">
</head>
body {background-
image:url("images/mc.jpg");}
h1 {color:green;}
p {margin-left:20px;
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
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

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
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Meghan Frisco
 
Html.ppt
Html.pptHtml.ppt
Html.ppt
Sunil Thakur
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
JTechTown
 
Web Development
Web DevelopmentWeb Development
Web Development
Harshdeep Singh
 
Js placement
Js placementJs placement
Js placement
Sireesh K
 
Html part 2
Html part 2Html part 2
Html part 2
lokenra
 
N5 CSS
N5 CSSN5 CSS
Lesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTMLLesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTML
Olivia Moran
 
Coding a Website with HTML
Coding a Website with HTMLCoding a Website with HTML
Coding a Website with HTMLwrhsbusiness
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
ikram niaz
 
Unit iii css and javascript 1
Unit iii css and javascript 1Unit iii css and javascript 1
Unit iii css and javascript 1Jesus Obenita Jr.
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to Html
Joni
 
Ndim1 2009 Web Design
Ndim1 2009 Web DesignNdim1 2009 Web Design
Ndim1 2009 Web Design
guest0121dcd7
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
Transweb Global Inc
 
Session Two css
Session Two cssSession Two css
Session Two css
Mustafa Saeed
 
Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
Olivia Moran
 
Css1
Css1Css1

What's hot (20)

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)
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html.ppt
Html.pptHtml.ppt
Html.ppt
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Js placement
Js placementJs placement
Js placement
 
Html part 2
Html part 2Html part 2
Html part 2
 
N5 CSS
N5 CSSN5 CSS
N5 CSS
 
Css inclusion
Css   inclusionCss   inclusion
Css inclusion
 
Lesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTMLLesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTML
 
Coding a Website with HTML
Coding a Website with HTMLCoding a Website with HTML
Coding a Website with HTML
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
 
Unit iii css and javascript 1
Unit iii css and javascript 1Unit iii css and javascript 1
Unit iii css and javascript 1
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to Html
 
Ndim1 2009 Web Design
Ndim1 2009 Web DesignNdim1 2009 Web Design
Ndim1 2009 Web Design
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
 
Session Two css
Session Two cssSession Two css
Session Two css
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 
Css1
Css1Css1
Css1
 

Viewers also liked

Lesson 2
Lesson 2 Lesson 2
Lesson 2
AMSimpson
 
S davis bblteurpoe2012_videofeedback
S davis bblteurpoe2012_videofeedbackS davis bblteurpoe2012_videofeedback
S davis bblteurpoe2012_videofeedback
Simon Davis
 
Ancient Civilization
Ancient CivilizationAncient Civilization
Ancient Civilizationnoctor
 
Clp 1040 what is a documentary
Clp 1040   what is a documentaryClp 1040   what is a documentary
Clp 1040 what is a documentary
Civic Life Project
 
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
 
íDolos
íDolosíDolos
íDolos
juliana_arce
 
Clp keynote presentation 090113
Clp keynote presentation 090113Clp keynote presentation 090113
Clp keynote presentation 090113
Civic Life Project
 
Hello world
Hello worldHello world
Hello worldhemi46h
 
Civic Life Project School presentation 090313
Civic Life Project School presentation 090313Civic Life Project School presentation 090313
Civic Life Project School presentation 090313
Civic Life Project
 

Viewers also liked (9)

Lesson 2
Lesson 2 Lesson 2
Lesson 2
 
S davis bblteurpoe2012_videofeedback
S davis bblteurpoe2012_videofeedbackS davis bblteurpoe2012_videofeedback
S davis bblteurpoe2012_videofeedback
 
Ancient Civilization
Ancient CivilizationAncient Civilization
Ancient Civilization
 
Clp 1040 what is a documentary
Clp 1040   what is a documentaryClp 1040   what is a documentary
Clp 1040 what is a documentary
 
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...
 
íDolos
íDolosíDolos
íDolos
 
Clp keynote presentation 090113
Clp keynote presentation 090113Clp keynote presentation 090113
Clp keynote presentation 090113
 
Hello world
Hello worldHello world
Hello world
 
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 46h interaction 1.lesson Hello world

Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
Diego Scataglini
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
Diego Scataglini
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
malrad1
 
HTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the CodeHTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the Code
Michael Sturgeon
 
HTML5 tags.ppt
HTML5 tags.pptHTML5 tags.ppt
HTML5 tags.ppt
abcxyz1337
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
Altaf Pinjari
 
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
 
Html and html5 cheat sheets
Html and html5 cheat sheetsHtml and html5 cheat sheets
Html and html5 cheat sheets
Zafer Galip Ozberk
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
Aditya Varma
 
Html
HtmlHtml
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
Kaloyan Kosev
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3
Anjan Mahanta
 
Web Development Using CSS3
Web Development Using CSS3Web Development Using CSS3
Web Development Using CSS3
Anjan Mahanta
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introduction
cncwebworld
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3
bluejayjunior
 
Html
HtmlHtml
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010alanburke
 

Similar to 46h interaction 1.lesson Hello world (20)

Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
HTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the CodeHTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the Code
 
HTML5 tags.ppt
HTML5 tags.pptHTML5 tags.ppt
HTML5 tags.ppt
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
 
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 and html5 cheat sheets
Html and html5 cheat sheetsHtml and html5 cheat sheets
Html and html5 cheat sheets
 
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
HtmlHtml
Html
 
Dhtml chapter2
Dhtml chapter2Dhtml chapter2
Dhtml chapter2
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
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, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introduction
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3
 
Html
HtmlHtml
Html
 
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
 

Recently uploaded

678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf
CarlosHernanMontoyab2
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
TechSoup
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
Nguyen Thanh Tu Collection
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Atul Kumar Singh
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
Anna Sz.
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
Sandy Millin
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Thiyagu K
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
Tamralipta Mahavidyalaya
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
MysoreMuleSoftMeetup
 
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdfAdversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Po-Chuan Chen
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
GeoBlogs
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
Jisc
 
The Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdfThe Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdf
kaushalkr1407
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
JosvitaDsouza2
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
EugeneSaldivar
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
BhavyaRajput3
 

Recently uploaded (20)

678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
 
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdfAdversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
 
Chapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptxChapter 3 - Islamic Banking Products and Services.pptx
Chapter 3 - Islamic Banking Products and Services.pptx
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
 
The Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdfThe Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdf
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
 

46h interaction 1.lesson Hello world

  • 1. Hello World - and save as hello.html
  • 2. Assingment 1-1 • Make a folder and name it 'lecture1'. • 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. HTML5 minimum <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>HTML5</title> </head> <body> <h1>Hello world</h1> <p>In the right HTML5 way.</p> </body> </html>
  • 5. 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
  • 6. (home) Assingment 1-2 Go to Codecademy.com and sign up. Go to http://www.codecademy.com/tracks/web and complete 'HTML Fundamentals'.
  • 7. Assingment 1-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
  • 8. 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/
  • 9. Assingment 1-4 • Validate your pages at www.w3.org
  • 10. CSS The CSS Zen Garden - http://www.csszengarden.com/
  • 11. CSS Selectores HTML Block elements => h1..h6, p, div, span, ul, li, … HTML Inline elements => a, img, hr And the id and class Selectors #para1 { //id selestor text-align:center; color:red; } .center { //class selector text-align:center; }
  • 12. HTML Grouping elements • <div></div> – The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. – The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. – When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. • <span></span> – The <span> tag is used to group inline-elements in a document. – The <span> tag provides no visual change by itself. – The <span> tag provides a way to add a hook to a part of a text or a part of a document. – When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
  • 13. Internal style sheet <head> <style> body { background-image:url("images/mc.jpg"); } h1 { color:green; } p { margin-left:20px; color:#ff0000; } </style> </head>
  • 14. External style sheet <head> <link rel="stylesheet" type="text/css" href=“css.css"> </head> body {background- image:url("images/mc.jpg");} h1 {color:green;} p {margin-left:20px; color:#ff0000;} css.css index.html
  • 15. Inline style • <p style="color: green; margin-left: 20px">This is a paragraph.</p>
  • 16. (home) Assingment Go to http://www.codecademy.com/tracks/web and complete course 4: Advanced CSS Selectors
  • 17. Assingment For index and page2 you have to make: • External style sheet • Internal style sheet • Inline style sheet • Validate HTML and CSS
  • 19. 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