HTML

Published on January 2017 | Categories: Documents | Downloads: 46 | Comments: 0 | Views: 659
of 5
Download PDF   Embed   Report

Comments

Content

HTML
The DOCTYPE declaration defines the document type to be HTML <!DOCTYPE
html>
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the
document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
Headings range from h1 (biggest) – h6 (smallest)
Links are defined like this: <a href="URL or document name">Link name</a>
Images are defined like this: <img src="document name" alt="alternative
text" width="" height="">
HTML elements with no content are called empty elements (<br>). Empty
elements can be "closed" in the opening tag like this: <br />.
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
The document language can be declared in the <html> tag: <html lang=“enUS“>
Paragraphs can have a title atribute: <p title=“paragraph title“>. Title is
displayed as a tooltip when you hover a mouse over it.
The <hr> tag creates a horizontal line in an HTML page.
The HTML <head> element contains meta data. Meta data are not displayed.
The HTML <head> element is placed between the <html> tag and the <body>
tag
<title> element is meta data. It defines the HTML document's title
<meta> element is also meta data. It can be used to define the character set,
and other information about the HTML document

<style> element is used to define internal CSS style sheets
<link> element is used to define external CSS style sheets

The HTML style attribute has the following syntax: style="property:value"
properties: color (defines the text color), font-family (defines font), font-size
(font size in %), text-align (horizontal text alingment)

You can use: <b> to make a text bold, <strong> to make a text strong, <i> to
make italic text, <em> to make emphasized text
Bold is visually the same as strong, so is italic and emhpasized, but the difference
is in the meaning strong and emhpasized mean that the content is important.
<small> is used to make content smaller than the content around
<makred> is used to higlight the text
<del> is used for deleted text (word)
<ins> is used for inserted text (word)
<sub> is used for subscripted text (word)
<sup> is used for superscripted text (word)
We use element <q> to write quoted text because you can’t use “”
<kbd> element defines the keyboard input (output is the same as the input)
You can add comments to the HTML source by using the following syntax: <!-Comments -->
Styling can be added to HTML elements in 3 ways:
Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files
CSS styling has the following syntax: element { property:value;
property:value }
Inline style uses the style atribute: style="property:value"
Internal styling is defined in the <head> section of an HTML page, using
a <style> element:
External styles are defined in an external CSS file, and then linked to in
the <head> section of an HTML page: <link rel="stylesheet" href="styles.css">
border: px color – defines the visable border around an HTML element
padding: px – defines a padding inside the border
margin: px – defines the space outside the border
To define a special style for one special element, first add an id attribute to the
element: id="name"
then define a different style for the (identified) element: #name { ... }
To define a style for a special type (class) of elements, add a class attribute to the

element: class="name" then you define the class .name{...}
Example of how you can edit link styles:
<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>
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
If you don't specify a border with border atribute table will be displayed without
it.
To add borders, use the CSS border property:
table, th, td {
border: 1px solid black;
}
<caption> is used to add caption to the table
Lists in HTML can be unordered <ul> or ordered <ol>
In list each elements starts with <li> tag
A style atribute can be added to unordered list, to define the style of the marker:
style=“list-style-type:disc/circle/square/none“
A type atribute can be added to an ordered list to define the type of marker:
type = „1/A/a/I/i“
HTML also supports description lists <dl> the <dt> tage deines the term
(name) and <dd> tag describes each term (name).
WE can display list horizontally by using CSS style atribute display:inline
A block-level elements always starts on a new line and takes up the full width
available:
<div>, <h1-6>, <p>, <form>
An inline element doesn't start on a new line and onyl takes up as much width
as necessary:
<span>, <a>, <img>
<div> elements is used as a container for other HTML elements.
<span> is often used as a container for some text

Div elements can be used to organize the layout witch CSS.
<header>, <nav>, <section>, <article>, <aside>, <footer> but you need to
define style for all those elements (header {...})
It is not recomended to use table element for layout
You can make your website responsive (to different screen sizes) by adding float
atributes in style or you can use responsive style sheet
Iframe is used to display a web page within a web page:
<iframe src="URL"></iframe>
You can use height and width atributes to determan size but they can also be in
percent
In style atribute you can use „border:none“ to remove the border or define which
type of border you want.
iframe can be used as a traget frame for a link by using name atribute in iframe
and target atribute in link.
The <script> tag is used to define the clinet-side script
The <noscript> tag is used to provide alternative contet to users that don't
support client-side scripts
<head> element is a container for metadata. Metadata is data about data:
<meta name="keywords" content="list of tags">
<meta name="description" content="short description">
<meta charset="UTF-8">
<meta name="author" content="Name of the author">
<meta http-equiv="refresh" content="30">
Reserved characters in HTML must be replaced with character entities.
A character entity looks like this: &entity_name; or &#entity_number;
HTML5 introduced some new fetures most important ones are:
New semantic elements like <header>, <footer>, <article>, and <section>.
New form control attributes like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
Tim Bernes-Lee invented www 1989
Tim Bernes-Lee invented HTML 1991
Dave Regget drafted HTML+ 1993
HTML Working Group defined HTML 2.0 1995
W3C Recommended HTML 3.2 1997
W3C Recommended HTML 4.01 1999
W3C Recommended XHTML 1.0 2000
HTML5 WHATWG First Public Draft 2008
HTML5 WHATWG Living Standard 2012
HTML5 W3C Final Recommendation 2014

You can „teach“ older browsers to interpret new HTML5 elements
1 line of code shouldn't be longer than 80 charachter
Close all elements in HTML
Use lowercase letters when writing code
Put all the atriubte values in „“

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close