Authorship & Interaction
Samina Parvin
Responsive Design
Hotglue.me HTML page
http://www.w3schools.com/html/default.asp
HTML Headings
HTML Horizontal Rules
HTML Line Breaks
HTML Paragraphs
The HTML < pre > Element
HTML Styles
HTML Background Colour
HTML Text Colour
HTML Fonts
HTML Text Size
HTML Text Alignment
HTML Colours
Trying out colour in Hotglue.me
HTML RGB Values
HTML RGB shades of grey
HTML Hex Values
HTML Hex shades of grey
HTML Images
HTML Width and Height, or Style?
HTML Animated Images
HTML Using an Image as a Link
CSS Colours
CSS RGB Values
CSS RGB shades of grey
CSS Backgrounds
CSS Background Image
CSS Backgrounds
Home
CSS Text Colour
CSS Text Alignment
CSS Text Alignment- Justified
CSS Text Decoration
CSS Text Transformation
CSS Font Families
CSS Font Style
CSS Font Size
Google Fonts in Hotglue.me
Lynda.com tutorials:
https://www.lynda.com/HTML-tutorials/importance-HTML/170427/196129-4.html
https://www.lynda.com/Web-Responsive-Design-tutorials/Welcome/104969/115611-4.html
HTML stands for HyperText Markup Language. Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext.
The first thing we should do is set up the skeleton of the page.
a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in this case, HTML).
b. Always put on the next line. This starts the HTML document.
c. Always put on the last line. This ends the HTML document.
Things inside <>s are called tags.
1.
< !DOCTYPE html >
< html >
< /html >
2.
< !DOCTYPE html >
< html >
< head >
< /head >
< /html >
3.
< !DOCTYPE html >
< html >
< head >
< title >your title < /title >
< /head >
< /html >
4.
< !DOCTYPE html >
< html >
< head >
< title >your title < /title >
< /head >
< body >
< /body >
< /html >
5.
< !DOCTYPE html >
< html >
< head >
< title >your title< /title >
< /head >
< body >
< p >your paragraph here< /p >
< /body >
< /html >
6.
< !DOCTYPE html >
< html >
< head >
< title >
Heading & Paragraphs
< /title >
< /head >
< body >
< h1 >test< /h1 >
< h2 >test< /h2 >
< p >your paragraph here< /p >
< p >your paragraph here< /p >
< /body >
< /html >
7.
< !DOCTYPE html >
< html >
< head >
< title >images for the net< /title >
< /head >
< body >
< p >Insert an image from another folder< /p >
< img src=“/images/stickman.gif” alt=“Stickman” width=“24” height=“39” >
< p >Insert an image from a web site< /p >
< img src=“http://w3schools.com/images/lamp.jpg” alt=“Lamp” width=“15” height=”15” >
< /body >
< /html >
8.
< !DOCTYPE html >
< html >
< head >
< title >images as link< /title >
< /head >
< body >
< p >An image that is a link:
< a href=“http://www.w3schools.com” >
< img src=“smiley.gif” alt=“Go to W3Schools!” width=“42” height=“42” border=“0” >
< /a >
< /p >
< /body >
< /html >
9.
< !DOCTYPE html >
< html >
< head >
< style >
body {
color: blue;
}
h1 {
color: green;
}
< /style >
< /head >
< body >
< h1 >This is heading 1< /h1 >
< p >This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.< /p >
< /body >
< /html >
10.
< !DOCTYPE html >
< html >
< head >
< style >
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
< /style >
< /head >
< body >
< h1>This is heading 1
< h2 >This is heading 2< /h2 >
< h3 >This is heading 3< /h3 >
< /body >
< /html >
11.
< !DOCTYPE html >
< html >
< head >
< title >Setting the canvas background
< style type="text/css” >
body { background-colour: #F00 }
< /style >
< /head >
< body >
< p >My background is red.< /p>
< /body >
< /html >
12.
< !DOCTYPE html >
< html >
< head >
< style >
body {
background-color: lightblue;
}
< /style >
< /head >
< body >
< h1 >Hello World!< /h1 >
< p >This page has a light blue background color!< /p >
< /body >
< /html >