html intro
<!DOCTYPE html> <!-- declare the type of doc -->
<html> <!-- root element of an html page-->
<head> <!-- meta info about this doc-->
<title>Page Title</title> <!--specify a title-->
</head>
<body> <!-- visible page content, only these contents will be displayed-->
<h1>My First Heading</h1> <!-- a large heading-->
<p>My first paragraph.</p> <!-- a paragraph -->
</body>
</html>
tag
- start,contents,end:
<tagname>contents...</tagname>
basics
headings
- defined with <h1> to <h6>, from the most important to the least
links
- with
<a>tag<a href="http://www.google.com">this is a link</a>
images
- with
<img>tag
<img src='name.jpg' alt='almternative text' width='100' height='142'>
element
- headings
- paragraph
<br>a line break- remember to add end tag for most tags
attributes
- provide additional info about the element
- always specified in the start tag
- comes in pairs like
name='value' - language, in
<html lang="en-US"> - title, in
<p title="I'm a tooltip> - href,
<a href="http://www.google.com"> - size, alt, in
<img> - use single quotes if string contain double quotes or vice versa
headings
<h1>to<h6><hr>represents a horizontal rule or line
<head>is a container for metadata, define doc title, char set, styles, links, scripts and other info
paragraphs
- extra spaces and lines will be removed
<br>line break, no end tag<pre>will preserve both spaces and line breaks
styles
<tagname style="property:value;">- background:
<body style="background-color:powderblue;"> - text color:
<p style="color:red;" - font:
<p style="font-family:verdana;" - text size:
<p style="font-size:300%;" - text alignment:
<p style="text-align:center;"
text formating
<tagname>contents</tagname>- bold, b
- important, strong
- italic, i
- emphasized, em
- marked or highlighted, mark
- small, small
- deleted, del
- inserted, ins
- subscript, sub
- superscript, sup
quotations
<q>for short quotations<blockquote cite="http:...">for section quote<abbr>, abbreviation,<abbr title="full name"><address>, for address<cite>, a title of work<bdo>override the current text direction
codes
<code><kbd>for keyboard input<samp>for sample output of a program<var>for variables
comments
<!-- comments -->
color
- red, orange, cyan
- reg(255,255,255)
- HEX: #FF00FF
CSS
- stand for Cascading Style Sheets
- describe how HTML elements are to be displayed on screen
- saves a lot of work
-
3 ways to add:
- Inline (style attr in HTML)
<h1 style="color:blue;">
- Internal(
<style>element in the<head>)
<head>
<style media="screen">
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
- external(external CSS file)
- add a link to the
<head>element
- add a link to the
<link rel="stylesheet" href="styles.css">
- styles.css
body {
background-color: blue;
font-family: verdana;
font-size: 300%;
}
h1 {
color: green;
}
p {
color: red;
}
CSS font
- color
- font-family
- font-size
CSS Border & padding
- border around an element
- padding: space between text and border
- margin: space outside the border
p {
border: 1px solid blue;
padding: 30px;
margin: 50px;
}
id attribute
- define a specific style for one element
<p id="p01">text</p> - then define the id
#p01 {
color:blue;
}
class attribute
- define a style for a special type of elements
<p class="error"> - then define the style for this class
p.error {
color:blue;
}
links
- defined with
<a>tag<a href="url">link text</a>
local links
- relative url without http://www…
link colors
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
target attr
- define where to open this link
target = "option"in<a>- _blank - Opens the linked document in a new window or tab
- _self - Opens the linked document in the same window/tab as it was clicked (this is default)
- _parent - Opens the linked document in the parent frame
- _top - Opens the linked document in the full body of the window
- framename - Opens the linked document in a named frame
image links
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
bookmarks
- id attr
<!-- create bookmark -->
<h2 id="tips">Useful Tips Section</h2>
<!-- link to jump to the bookmark -->
<a href="#tips">Visit the Useful Tips Section</a>
images
- use style
- pic in another folder
/images/html5.gif style= float:right;, put pic on the right, usually with in a paragraph
<img src="url" alt="some_text" style="float:right;width:width;height:height;">
- pic in another folder
- use width and height
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> - image map, add clickable area with
<map>
