Академический Документы
Профессиональный Документы
Культура Документы
1 HTML
UNDERSTANDING COMMON HTML TERMS
1.1.1
Elements
Elements are designators that define the structure and content of objects within
a page. Some examples are
(headings)
<p> (paragraph)
<a> (anchor)
<section>
<div> (division)
<article>
<span>
<header>, <footer>
<strong>
<em>
Tags
Attributes
The document type declaration, or <!DOCTYPE html>, informs web browsers which version
of HTML is being used and is placed at the very beginning of the HTML document. Because
well be using the latest version of HTML, our document type declaration is
simply <!DOCTYPE html>. Following the document type declaration, the<html> element
signifies the beginning of the document.
Inside the <html> element, the <head> element identifies the top of the document,
including any metadata (accompanying information about the page). The content inside
the <head> element is not displayed on the web page itself. Instead, it may include the
document title (which is displayed on the title bar in the browser window), links to any
external files, or any other beneficial metadata.
All of the visible content within the web page will fall within the <body> element. A
breakdown of a typical HTML document structure looks like this:
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
ATTRIBUTES
In the previous example, the <meta> element had only one tag and didnt include a closing
tag. Fear not, this was intentional. Not all elements consist of opening and closing tags.
Some elements simply receive their content or behavior from attributes within a single tag.
The <meta> element is one of these elements. The content of the previous <meta> element
is assigned with the use of the charset attribute and value. Other common selfclosing
elements include
<br>
<input>
<source>
<embed>
<link>
<wbr>
<hr>
<meta>
<img>
<param>
For example, if we have a <div> with an orange background that contains social media
links, our first thought might be to give the <div> a class value of orange. What happens
if that orange background is later changed to blue? Having a class value of orange no
longer makes sense. A more sensible choice for a class value would be social, as it
pertains to the contents of the <div>, not the style.
1
2
3
4
5
6
7
8
9
TEXT-BASED ELEMENTS
1.4.1
Headings
1.4.2
Paragraphs
Headings are often followed by supporting paragraphs. Paragraphs are defined using
the <p> block-level element. Paragraphs can appear one after the other, adding information
to a page as desired. Here is example of how to set up paragraphs.
1
2
3
4
BUILDING STRUCTURE
For the longest time the structure of a web page was built using divisions. The problem
was that divisions provide no semantic value, and it was fairly difficult to determine the
intention of these divisions. Fortunately HTML5 introduced new structurally based
elements, including the <header>, <nav>, <article>, <section>, <aside>,
and <footer>elements.
All of these new elements are intended to give meaning to the organization of our pages
and improve our structural semantics. They are all block-level elements and do not have
any implied position or style. Additionally, all of these elements may be used multiple
times per page, so long as each use reflects the proper semantic meaning.
Lets roll up our sleeves and take a closer look.
1.5.1
Header
The <header> element, like it sounds, is used to identify the top of a page, article, section,
or other segment of a page. In general, the <header> element may include a heading,
introductory text, and even navigation.
1
2
<header>...</header>
It is easy to confuse the <header> element with the <head> element or the heading
elements, <h1> through <h6>. They all have different semantic meanings and should be
used according to their meanings. For reference
The <header> element is a structural element that outlines the heading of a segment of a
page. It falls within the <body> element.
The <head> element is not displayed on a page and is used to outline metadata, including
the document title, and links to external files. It falls directly within the <html> element.
Heading elements, <h1> through <h6>, are used to designate multiple levels of text
headings throughout a page.
1.5.2
Navigation
1.5.3
<nav>...</nav>
Article
<article>...</article>
1.5.4 Section
The <section> element is used to identify a thematic grouping of content, which generally,
but not always, includes a heading. The grouping of content within the<section> element
may be generic in nature, but its useful to identify all of the content as related.
The <section> element is commonly used to break up and provide hierarchy to a page.
1
2
<section>...</section>
1.5.5 Aside
The <aside> element holds content, such as sidebars, inserts, or brief explanations, which
is tangentially related to the content surrounding it. When used within
an <article>element, for example, the <aside> element may identify content related to
the author of the article.
We may instinctively think of an <aside> element as an element that appears off to the left
or right side of a page. We have to remember, though, that all of the structural elements,
including the <aside> element, are block-level elements and as such will appear on a new
line, occupying the full available width of the page or of the element they are nested
within, also known as their parent element.
1
2
<aside>...</aside>
1.5.6 Footer
The <footer> element identifies the closing or end of a page, article, section, or other
segment of a page. Generally the <footer> element is found at the bottom of its parent.
Content within the <footer> element should be relative information and should not
diverge from the document or section it is included within.
1
2
<footer>...</footer>
CREATING HYPERLINKS
Along with text, one of the core components of the Internet is the hyperlink, which
provides the ability to link from one web page or resource to another. Hyperlinks are
established using the anchor, <a>, inline-level element. In order to create a link from one
page (or resource) to another, the href attribute, known as a hyperlink reference, is
required. The href attribute value identifies the destination of the link.
For example, clicking the text Shay, which is wrapped inside the anchor element with
the href attribute value of http://shayhowe.com, will take users to a website.
1
2
1.6.1
<a href="http://shayhowe.com">Shay</a>
The two most common types of links are links to other pages of the same website and links
to other websites. These links are identified by their href attribute values, also known as
their paths.
Links pointing to other pages of the same website will have a relative path, which does not
include the domain (.com, .org, .edu, etc.) in the href attribute value. Because the link is
pointing to another page on the same website, the href attribute value needs to include
only the filename of the page being linked to: about.html, for example.
Linking to other websites outside of the current one requires an absolute path, where
the href attribute value must include the full domain. A link to Google would need the
href attribute value of http://google.com, starting with http and including the
4
5
6
1.6.2
1.6.3
One feature available with hyperlinks is the ability to determine where a link opens when
clicked. Typically, links open in the same window from which they are clicked; however,
links may also be opened in new windows.
To trigger the action of opening a link in a new window, use the target attribute with a
value of _blank. The target attribute determines exactly where the link will be displayed,
and the _blank value specifies a new window.
To open http://shayhowe.com/ in a new window, the code would look like this:
1
2
Our code for this same-page link would look like the following:
1
2
3
4
5
<body id="top">
...
<a href="#top">Back to top</a>
...
</body>
CSS
CSS code can be added to our HTML pages between <style type=text/css> and </style>
tags. This tags can be placed either in the <head> or in the <body> of our page.
1
2
3
4
5
6
7
<body>
...
<style type=text/css>
div { background: green; }
</style>
...
</body>
Another method of styling elements is using CSS inline, as value of style attribute.
1
2
3
4
5
1.7.2
JavaScript
JavaScript code can be added to our HTML pages between <script type=text/javascript>
and </script> tags. This tags can be placed either in the <head> or in the <body> of our
page.
1
2
3
4
5
6
7
<body>
...
<script type=text/javascript>
alert(This is JavaScript!);
</script>
...
</body>
1.7.3
We use the <link> tag to load external CSS into our HTML file.
<link href="/style.css" type="text/css" rel="stylesheet" />
1.7.4
Loading external JS
We use the <script> tag to load external JavaScript code into our HTML file.
<script src="/script.js" type="text/javascript"></script>
2.1.1
Internal Stylesheet
First we will explore the internal method. This way you are simply placing the CSS code
within the <head></head> tags of each (X)HTML file you want to style with the CSS. The
format for this is shown in the example below.
<head>
<title><title>
<style type=text/css>
CSS Content Goes Here
</style>
</head>
<body>
With this method each (X)HTML file contains the CSS code needed to style the page.
Meaning that any changes you want to make to one page, will have to be made to all. This
method can be good if you need to style only one page, or if you want different pages to
have varying styles.
2.1.2
External Stylesheet
Next we will explore the external method. An external CSS file can be created with any text
or HTML editor such as Notepad or Dreamweaver. A CSS file contains no (X)HTML, only
CSS. You simply save it with the .css file extension. You can link to the file externally by
placing one of the following links in the head section of every (X)HTML file you want to
style with the CSS file.
<head>
<title><title>
<link rel=stylesheet type=text/csshref=style.css />
</head>
<body>
or
<head>
<title><title>
<style type=text/css> @import url(Path To stylesheet.css)</style>
</head>
<body>
By using an external style sheet, all of your (X)HTML files link to one CSS file in order to
style the pages. This means, that if you need to alter the design of all your pages, you only
need to edit one .css file to make global changes to your entire website.
Here are a few reasons this is better.
Easier Maintenance
Reduced Bandwidth
2.1.3
Improved Flexibility
Cascading Order
In the previous paragraphs, I have explained how to link to a css file either internally or
externally. If you understood, than I am doing a good job. If not dont fret, there is a long
way to go before we are finished. Assuming you have caught on already, you are probably
asking, well can I do both? The answer is yes. You can have both internal, external, and
now wait a minute a third way? Yes inline styles also.
2.1.4
Inline Styles
I have not mentioned them until now because in a way they defeat the purpose of using
CSS in the first place. Inline styles are defined right in the (X)HTML file along side the
element you want to style. See example below.
2.1.5
So with all these various ways of inserting CSS into your (X)HTML files, you may now be
asking well which is better, and if I use more than one method, in what order do these
different ways load into my browser?
All the various methods will cascade into a new pseudo stylesheet in the following order:
1. Inline Style (inside (X)HTML element)
2. Internal Style Sheet (inside the <head> tag)
3. External Style Sheet
CSS SYNTAX
The syntax for CSS is different than that of (X)HTML markup. Though it is not too
confusing, once you take a look at it. It consists of only 3 parts.
The selector is the (X)HTML element that you want to style. The property is the actual
property title, and the value is the style you apply to that property.
Each selector can have multiple properties, and each property within that selector can have
independent values. The property and value are separated with a colon and contained
within curly brackets. Multiple properties are separated by a semi colon. Multiple values
within a property are sperated by commas, and if an individual value contains more than
one word you surround it with quotation marks. As shown below.
body {
background: #eeeeee;
font-family: Trebuchet MS, Verdana, Arial, serif;
}
INHERITANCE
When you nest one element inside another, the nested element will inherit the properties
assigned to the containing element. Unless you modify the inner elements values
independently.
For example, a font declared in the body will be inherited by all text in the file no matter
the containing element, unless you declare another font for a specific nested element.
For example, if the body margin is set to 20 pixels, the other elements within the file will
not inherit the body margin by default.
COMBINING SELECTORS
You can combine elements within one selector in the following fashion.
CSS CLASSES
The class selector allows you to style items within the same (X)HTML element differently.
Similiar to what I mentioned in the introduction about inline styles. Except with classes the
style can be overwritten by changing out stylesheets. You can use the same class selector
again and again within an (X)HTML file.
To put it more simply, this sentence you are reading is defined in my CSS file with the
following.
p{
font-size: small;
color: #333333
}
Pretty simple, but lets say that I wanted to change the word sentence to green bold text,
while leaving the rest of the sentence untouched. I would do the following to my (X)HTML
file.
<p>
To put it more simply, this <span class=greenboldtext>sentence</span> you are
.greenboldtext{
font-size: small;
color: #008080;
font-weight: bold;
}
Please note that a class selector begins with a (.) period. The reason I named it
greenboldtext is for example purposes, you can name it whatever you want. Though I do
encourage you to use selector names that are descriptive. You can reuse the
greenboldtext class as many times as you want.
CSS IDS
IDs are similar to classes, except once a specific id has been declared it cannot be used
again within the same (X)HTML file.
I generally use IDs to style the layout elements of a page that will only be needed once,
whereas I use classes to style text and such that may be declared multiple times.
The main container for this page is defined by the following.
<div id=container>
Everything within my document is inside this division.
</div>
I have chosen the id selector for the container division over a class, because I only need
to use it one time within this file.
Then in my CSS file I have the following:
#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
CSS BOX-MODEL
In a document, each element is represented as a rectangular box. Determining the size,
properties like its color, background, borders aspect and the position of these boxes
is the goal of the rendering engine.
In CSS, each of these rectangular boxes is described using the standard box model. This
model describes the content of the space taken by an element. Each box has four edges:
the margin edge, border edge, padding edge, and content edge.
The content area is the area containing the real content of the element. It often has a
background, a color or an image (in that order, an opaque image hiding the background
color) and is located inside the content edge; its dimensions are the content width, or
content-box width, and the content height, or content-box height.
If the CSS box-sizing property is set to default, the CSS properties width, min-width, maxwidth, height, min-height and max-height control the content size.
The padding area extends to the border surrounding the padding. When the content area
has a background, color, or image set on it, this will extend into the padding, which is why
you can think of the padding as extending the content. The padding is located inside the
padding edge, and its dimensions are the padding-box width and the padding-box height.
The space between the padding and the content edge can be controlled using the paddingtop, padding-right, padding-bottom, padding-left and the shorthand padding CSS
properties.
The border area extends the padding area to the area containing the borders. It is the area
inside the border edge, and its dimensions are the border-box width and the border-box
height. This area depends on the size of the border that is defined by the border-width
property or the shorthand border.
The margin area extends the border area with an empty area used to separate the element
from its neighbors. It is the area inside the margin edge, and its dimensions are the
margin-box width and the margin-box height.
The size of the margin area is controlled using the margin-top, margin-right, marginbottom, margin-left and the shorthand margin CSS properties.
POSITIONING
The position property (as you may have guessed) changes how elements are positioned on
your webpage.
position: value;
Values:
a) static
b) relative
c) absolute
d) fixed
2.8.1
Static
Static positioning is by default the way an element will appear in the normal flow of your
(X)HTML file. It is not necessary to declare a position of static. Doing so, is no different
than not declaring it at all.
position: static;
2.8.2
Relative
Positioning an element relatively places the element in the normal flow of your (X)HTML file
and then offsets it by some amount using the properties left, right, top and bottom. This
may cause the element to overlap other elements that are on the page, which of course
may be the effect that is required.
position: relative;
2.8.3
Absolute
Positioning an element absolutely, removes the element from the normal flow of your
(X)HTML file, and positions it to the top left of its nearest parent element that has a
position declared other than static. If no parent element with a position other than static
exists then it will be positioned from the top left of the browser window.
position: absolute;
2.8.4
Fixed
Positioning an element with the fixed value, is the same as absolute except the parent
element is always the browser window. It makes no difference if the fixed element is
nested inside other positioned elements.
Furthermore, an element that is positioned with a fixed value, will not scroll with the
document. It will remain in its position regardless of the scroll position of the page.
At this time IE6 (Internet Explorer 6) does not support the fixed value for the positioning of
an element. Thus it will not position fixed elements correctly and will still scroll with the
page. To see this effect in action you will need to use a standards compliant browser, such
as Firefox 1.0
position: fixed;
When positioning elements with relative, absolute or fixed values the following properties
are used to offset the element:
top
left
right
bottom
MARGINS
As you may have guessed, the margin property declares the margin between an (X)HTML
element and the elements around it. The margin property can be set for the top, left, right
and bottom of an element. (see example below)
length
percentage
auto
You can also declare all the margins of an element in a single property as follows:
If only one value is declared, it sets the margin on all sides. (see below)
margin: 10px;
If you only declare two or three values, the undeclared values are taken from the opposing
side. (see below)
margin: -10px;
Elements like paragraphs have default margins in some browsers, to combat this set the
margin to 0 (zero).
p {margin: 0;}
Padding is the distance between the border of an (X)HTML element and the content within
it.
Most of the rules for margins also apply to padding, except there is no auto value, and
negative values cannot be declared for padding.
PADDING
Padding is the distance between the border of an (X)HTML element and the content within
it.
Most of the rules for margins also apply to padding, except there is no auto value, and
negative values cannot be declared for padding.
height: value;
Values:
auto
length
percentage
line-height: value;
Values:
normal
number
length
percentage
max-height: value;
Values:
none
length
percentage
min-height: value;
Values:
length
percentage
2.11.5 Width
You can control the width of an element with the width property
width: value;
Values:
auto
length
percentage
max-width: value;
Values:
none
length
percentage
min-width: value;
Values:
length
percentage
TEXT PROPERTIES
2.12.1 Color
You can set the color of text with the following:
color: value;
Possible values are
normal
length
text-align: value;
Possible values are
left
right
center
justify
text-decoration: value;
Possible values are
none
underline
overline
line through
blink
text-indent: value;
Possible values are
length
percentage
text-transform: value;
Possible values are
none
capitalize
lowercase
uppercase
Examples:
white-space: value;
Possible values are
normal
pre
nowrap
word-spacing: value;
Possible values are
normal
length
FONT PROPERTIES
2.13.1 Font
The font property can set the style, weight, variant, size, line height and font:
The above would set the text of an element to an italic style a bold weight a normal variant
a relative size a line height of 1.4em and the font to Verdana or another sans-serif
typeface.
2.13.2 Font-Family
You can set what font will be displayed in an element with thefont-family property.
There are 2 choices for values:
family-name
generic family
If you set a family name it is best to also add the generic family at the end. As this is a
priortized list. So if the user does not have the specified font name it will use the same
generic family. (see below)
font-size: value;
There are a lot of choices for values:
xx-large
x-large
larger
large
medium
small
smaller
x-small
xx-small
length
% (percent)
font-style: value;
Possible values are
normal
itailc
oblique
font-variant: value;
Possible values are
normal
small-caps
font-weight: value;
Possible values are
lighter
normal
100
200
300
400
500
600
700
800
900
bold
bolder
BACKGROUNDS
2.14.1 Background
You can style the background of an element in one declaration with
the background property.
attachment
color
image
position
repeat
background-attachment: value;
Values:
fixed
scroll
background-color: value;
Values:
color name
hexadecimal number
transparent
background-image: url(path_to_image);
Values:
url
none
background-position: value;
Values:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat: value;
Values:
no-repeat
repeat
repeat-x
repeat-y
Display
Float
Clear
Cursor
Overflow
Visibility
Z-index
Border
3 RESOURCES
Heres a list of resources that can help you learn the basics of HTML and CSS:
http://learn.shayhowe.com/html-css/
http://www.cssbasics.com/
http://www.codecademy.com/learn
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS
For questions: http://stackoverflow.com/