HyperText Markup Language is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer's additional use of CSS.
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
All that was done using tags. So what are they?
They're building blocks of html document.
Simple tag is comprised of < & > which wraps the tag name. ie: <img>
More often tags are paired, with one being opening (regular simple tag) and second closing, which has a slash after the opening angle bracket. ie: <p></p>
However, not all of these elements require the closing tag. Some elements, the so-called void elements, do not have an end tag. ie: <br/>, <img/>
Different tags can contain other tags. Also, tags can have HTML attributes. ie: <a href='#goto-1-anchor'><img alt='Anchor' src='anchor.jpg'/><a>
The first attribute to be found on the web-page (if you omit it, it will be implied, and you won't like it for sure)
We can distinguish next sets of doctypes:
Also, different doctypes have different standards for html: for example, in html4.01 void elements can omit trailing slash, in xhtml we have to set it with space. i.e <img alt="Portrait "
watch me in browser
<!doctype html> <title>HTML5 Minimal Markup Example</title>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML 1.0 Strict! Minimal Markup Example</title> </head> <body> </body> </html>
The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.
For render, most web browsers use a model similar to the DOM. The nodes of every document are organized in a tree structure, called the DOM tree, with topmost node named "Document object".
It holds different meta info. About:
To get our resources we have to specify what and where from we're getting. The first one is being told by special attributes - rel or type, i.e.:
<link rel="shortcut icon" href="/somewhere/myicon.png" />
<link rel="stylesheet" href="../shared/css/reveal.min.css">
For the second part we're using URL - Uniform Resource Locator, which is also referenced as 'web address'.
By looking at page adress (in adress bar, usually, at the top of your browser window, you can tell
<img src='/relative_to_host_sample_url_image.jpg'/> <img src='../shared/current_relative_sample_url_image.jpg'/> <img src='current_relative_sample_url_image.jpg'/> <img src='https://drive.google.com/uc?export=view&id=0B65dEGRmB3VidlpTaG04b0k0bEE'/>
You can also change the way relative resolving works by setting href at <base> tag, ie: <BASE href="http://draft.com.ua/img/"> This attribute specifies an absolute URI that acts as the base URI for resolving relative URIs. See sample.
1. Help out search engines to define, what your page is about, thus helping out SEO guys. You can set your desription, keywords here.
2. Refresh page or redirect to another one.
<meta http-equiv="refresh" content="5; URL=html_basics/#/14/3">
Check it in browser.
<meta http-equiv="location" content="URL=html_basics/#/14/3">
This way, the http-equiv attribute can be used to simulate an HTTP response header.
Meta tag with 'http-equiv' also
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="content-language" content="en-US"/>
General rule of thumb states that whatever tags do not define structure of a webpage should stay out of the <body>.
Meta info and external resources can be stated here.
Stylesheets should be included as early, as possible, to render page properly.
There're quite a bunch of different tags (list of 75) which give us a choice for every possible case.
We distinguish 2 types of HTML elements: block and inline.
Block level elements normally start (and end) with a new line when displayed in a browser. i.e: <h1>, <p>, <ul>, <div>.
Inline elements are normally displayed without starting a new line. i.e.: <span>, <a>, <img>.
Aside stay comments, that just comment out some code.
They're usually set up as <!-- This is a comment -->
<code>Computer code, for example</code>
<pre>Preformated text, which format should be keeped !</pre>
- Item 1
- Describe item 1
- Item 2
- Describe item 2
table header table header table footer table footer table footer table footer
Finally, universal block tag: <div></div> and inline tag <span></span> They provide no usual change by themselves, adding a hook to document.
Web page layout is very important to make your website look good. It defines structure relative to content and styling.
Bootstrap starter template
Use this document as a way to quick start any new project.
All you get is this message and a barebones HTML document.
At some point, tables were used
They provided easy way to position the content, use proportional containers, etc.Sample.
Table idea succesorsGridpak
Good thing you can generate your own grid using sass/less loops.
Usually code looks something like
<div class="row"> <div class="span4">4-section length div</div> <div class="span8">8-section length div</div> </div>
<div class="c"> <div class="main"></div> <div class="width-in-percent float-left"></div> <div class="width-in-percent float-left"></div> </div>
<link rel='stylesheet' href='css/ie6fixes.css'>
You can use equal, less than (lt), less than / equal (lte), greater than (gt), greater than / equal (gte)
Semantics (from Ancient Greek: σημαντικός sēmantikós) is the study of meaning.
Semantic layout won't make your live easier.
Tags provides more information about the semantic content of the markup (<header> vs <div class="header">)
Content itself tells you 'what' it is
Screen readers can more effectively present the content
Иван Пупкин, email@example.com
Let's title person and give his e-mail address.
<h3>Иван Пупкин</h3> <p>firstname.lastname@example.org</p>
In case of styling, name classes accordingly
<h3 class='name'>Иван Пупкин</h3> <p class='email'>email@example.com</p>
Let's go even further and use hCard microformat.
<h3 class="fn n"> <span class="given-name">Иван</span> <span class="family-name">Пупкин</span> </h3> <p class="email">firstname.lastname@example.org</p>
In case you need special characters, like ¥ or ©, you can either copy-paste them or use entity, that represent them &yen and &copyFull reference
XML stands for EXtensible Markup Language
XML was created for data description
XML's tags aren't predefined.
XML isn't there to replace HTML, they pursue different aims: XML's primary is to describe data and tell us what data is, while HTML is aimed at demonstrating data and telling us how data looks.
<book> <author> Philip K. Dick </author> <title> Ubik </title> <contents> <chapter1></chapter1> <chapter2></chapter2> ... <chapter17></chapter17> </contents> </book>
Stands for Extensible Stylesheet Language
Not only sets up styles, but also defines XML transformations
In fact, XSL consist of
Mr. Original 1 2 1 2 32 2 32 56 3 57 90
Chapter Pages # -