HTML
is a markup language for describing web documents (web pages). HTML means Hyper Text Markup Language. A markup language is a set of markup tags and HTML documents are described by HTML tags. Each HTML tag describes different document content.
Markup
means you type the text and then mark it up. HTML is the basic
language
for creating web pages on a website - it's easy to learn. Basic html page layout: <!DOCTYPE html>
<html>
<head>
<title>Title of page </title>
<meta name="description" content="Web tutorials">
</head>
<body>
<h1>Big Heading </h1> <h4>Small Heading </h4> <p>Text paragraph. </p>
</body>
</html>
The browser does not display the HTML tags, but uses them to determine how to display the document.
The first line on the top,
<!DOCTYPE html>
, is document type declaration and it lets the browser know which version of HTML you’re using. There are many vesions of doctype but HTML5 uses <!DOCTYPE html>.
<html>
is the opening tag. it tells the browser that everything between that and the
</html
closing tag is an HTML document. Note: / in the closing tag! All closing tags must have this slash.
The forward slash before the tag cancels the effect of the tag.
So the end tag for other commands is simply the begin tag with the added slash. The HTML <head< element contains meta data and meta data are not displayed so the information in the
<head>
element does not appear in the browser window. The text that you put in between the
<title>
tags becomes the title of the document, so: "HTMLpage" will appear on the title bar of the window (not the actual canvas area).
Meta tag
is a special HTML tag that provides information about a Web page. Unlike normal HTML tags, meta tags do not affect how the page is displayed. Basic example is: <head> <meta charset="UTF-8"> <meta name="description" content="Web tutorials"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="Your name"> </head> The
<body>
tag defines the document's body. The
<body>
element contains all the contents of an HTML document: text, hyperlinks, images, tables, lists, etc. Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
The p tag is used for paragraphs.
, The h1 tag is only used once, h2 to h6, however, can be used as often as desired, but they should always be used in order, as they were intended.
The
<ul
tag> is used to define unordered lists and the
<ol>
tag is used to define ordered lists.
Hyper
is the opposite of linear. Programming languages like basic are linear. HTML is not that and allows you to jump to any page on the WWW and at any time. To make a webpage you need a browser and a
text
program like notepad++ - if you need one free you can download it here notepad There are different version of HTML - the latest is HTML 5. To start making webpages it's good to have one specific drawer for all your HTML files. You don't need to be connected to internet. So you
1 Create
your web page in a text editor
2 Save
your web page as an HTML file using any appropriate name
3 Load
the HTML file into the browser to see how your web page looks and works
4 Go back
to text editor to make corrections, changes, etc. HTML Use CSS and JavaScript to liven up webpages. HTML is used for meaning and CSS is used for presentation.
Well, its very easy to use an webpageeditor that lets you put a htmlpage together without any html knowledge - but if you want to understand html the best way is to write html files in a texteditor!
HTML is written with normal text and it´s read from top to bottom and left to right.
The index.html page
is the common default page shown on a website if no other page is specified. So the first page on a website should be called index.html.
Empty HTML Elements = Single Tags
HTML elements with no content are called empty elements. The open and close tag format dominates the majority of the available HTML tags, but there are tags that stand alone like
<hr>
This command gives you a line across the page - horizontal rule.
<br>
is an empty element without a closing tag. It creates a line break. You might come across self-closing tags, for example, will look like
<br/>
instead of simply <br> HTML5 does not require empty elements to be closed. - either is valid in HTML 5.
HTML is not case-sensitive but most programmers use lowercase
- if you make XHTML page lower case is mandatory (XHTML is another markup language written in XML). HTML images are defined with the
<img>
tag. ke
<img
src="image.jpg"
alt
="name" width="104" height="142"
>
alt
is the text that will be displayed if the image isnt found.
HTML links
are defined with the
<a>
tag. The link address is specified in the href attribute. An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag — the destination of the link. <a href="http://www.yahoo.com">Click here to go to yahoo.</a> Click here to go to yahoo.
HTML Attributes
att Tags can also have attributes, which are extra bits of information. Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Note: Using quotes around attributes is the most common. Omitting quotes can produce errors. Example: HTML links are defined with the <a> tag. The link address is specified in the
href
attribute: <a
href
="http://www.html.com">This is a link</a>
The lang Attribute tag:
The document language can be declared in the <html>tag. <html lang="en-US">
Attribute Description
alt Specifies an alternative text for an image disabled Specifies that an input element should be disabled href Specifies the URL (web address) for a link id Specifies a unique id for an element src Specifies the URL (web address) for an image style Specifies an inline CSS style for an element title Specifies extra information about an element (displayed as a tool tip)
The title Attribute
In this example, the

element has a title attribute(webdesign): <p title="webdesign"> let mouse over!</p>

let mouse over!

Classing Block Elements
<!DOCTYPE html> <html> <head> <style>
div.cities
{ background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body>
<div class="cities">
<h2< London/h2> <p< London is the capital city of England.</p> </div> </body> </html>
HTML - Div Element(s) The
<div>
tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. The <div> element is often used as a layout tool, because it can easily be positioned with CSS. Click here for more info about div... HTML
Website Layout Using HTML5
HTML5 offers new semantic elements that define different parts of a web page: <header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent self-contained article <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details <summary> - Defines a heading for the <details> element
HTML

Responsive Web Design
makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen. An
iframe
is used to display a web page within a web page.
<iframe
src="URL">
</iframe>
The HTML
<script>
tag. The
<script>
tag is used to define a client-side script, such as a JavaScript. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. The HTML
<style>
Element The <style> element is used to define style information for an HTML document. Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax:
style
="property:value;" The property is a CSS property. The value is a CSS value <h1 style="color:orange;">orange</h1> <h3 style="color:blue;">blue</h3>

orange

blue


Set font size with CSS:

This is a paragraph.

<p style="font-size:160%;">This is a paragraph.</p>
html