Written work HTML and CSS analysis and coding

HTML is short for HyperText Markup Language. It is not a programming language but a mark-up language. It’s a way of describing how a set of text and images should be displayed to the viewer, similar in concept to a newspaper editor’s markup symbols.

A markup language is a set of markup tags. HTML uses markup tags to describe web pages, it makes plain text look good and is the ‘code’ that’s behind every webpage.

HTML Documents = Web Pages

HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

The text between <html> and </html> describes the web page

The text between <body> and </body> is the visible page content

The text between <h1> and </h1> is displayed as a heading

The text between <p> and </p> is displayed as a paragraph

A Web page consists of an HTML file, plus any image (picture) files used on the page. The HTML file (a normal text file) contains all the text to display, and also acts as the ‘glue’ to hold the text and images together in the right places, and display them in the right style.

TAGS

Writing an HTML file means composing the text you want to display, then inserting any tags you want in the right places. Tags begin with a < character and end with a > character, and tell a browser to do something special, like show text in italic or bold, or in a larger font, or to show an image, or to make a link to another Web page.

HTML tags are keywords surrounded by the angle brackets like <html>.

They normally come in pairs, the first tag in a pair is the start or opening tag, the second tag is the end or closing tag.

It’s a good idea to view lots of source code. Viewing the source code of any page that makes you wonder how something was done is a good way to learn about HTML. Everyone can learn by reading other people’s HTML code.

Basic HTML code manipulates a plain text document to apply style and reference. It does so by applying these ‘tags’. A tag does nothing more than indicating a position or selection of the document, and specifying the kind of thing that needs to be done.

<tag-example-1>This black text is the only part of the document that is affected.</tag-example-1>

Example 1 shows a sentence that’s encapsulated by two tags, a begin- and end tag. Everything in between is affected. Very common examples are making text bold, ITALIC, or creating a link. The end tag is identical to the begin tag, but is preceded in angle brackets by a forward slash ( / ).

Elements

HTML documents are defined by HTML elements.

An HTML element is everything from the start tag to the end tag.

An HTML element starts with a start tag / opening tag and ends with an end tag / closing tag.

The element content is everything between the start and the end tag.

Some HTML elements have empty content (no content) and are closed in the start tag. Most HTML elements can have attributes.

Empty elements (HTML elements with no content).

<br> is an empty element, or loner tag, without a closing tag (the <br> tag defines a line break). Although not required, it’s occasionally also written as <br/> to emphasize this. Loner tags don’t affect ‘part’ of the document, but signify things that happen ‘in between’. Common examples are line breaks and paragraph breaks.

Note: for loner tags, <tag>, <tag />, and <tag></tag> all mean the same thing.

Most HTML elements can be nested (can contain other HTML elements).

HTML documents consist of nested HTML elements. The HTML document example below contains three HTML elements.

<html>

<body>

<p>This is my first paragraph.</p>

</body>

</html>

The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.

The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).

The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).

Many HTML elements will produce unexpected results and/or errors if you forget the end tag.

Attributes

Attributes provide additional information about HTML elements.

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”

Common examples of additional attributes are text font and color, or image width, height and source. In those cases, the tag name is followed by a space, and a number of attribute with a value, again separated by spaces. The value is the variable part of this formula. The end tag remains the same, regardless of the attributes.

<tag attribute=”value” attribute2=”value2″>This, and only this part of the document is affected.</tag>

Attribute names and attribute values are case-insensitive, but the World Wide Web Consortium (W3C) recommends lowercase attributes so it is best to use lower case.

HTML, HEAD & BODY

The HTML, HEAD and BODY tags encapsulate the important parts of a document.

<HTML></HTML> simply indicates the use of HTML code. They’ll show in every webpage, usually at start and end, and embrace practically all the other code, including the next two.
<HEAD></HEAD> mark the ‘administrative building’. These will encapsulate the title, and enable certain scripts. Usually at the very top of the document.
<BODY></BODY> is located below the HEAD tags, and makes up most of the document. This part tells what’s actually showing on your webpage. Here are the text, images, links, and pretty much anything you can see in your browser.

The ‘Head’ area

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

The Title Element

The thing you must include in the HEAD section of all webpages in order to write valid HTML documents is the TITLE element. The <title> tag defines the title of the document. The title of a webpage appears in your browser´s title bar when you view the page. The title element is required in all HTML/XHTML documents. It will also provide a title for the page when it is added to favorites and displays a title for the page in search-engine results.

The Meta Element

The META element is used for a couple of different functions always inside the HEAD section. It´s the first empty element, which means that the META element can consist only of an opening tag. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The most important use for this element is to give the search engines some basic information about your HTML document such as the most important keywords that appear inside the document and a short description of the document´s content.

META tags use different attributes to specify the function for which each meta element is used. For example: to tell the search engines about important keywords inside your document, you would use the attribute name with the value keywords to define the function of this meta tag and also a second attribute content whose value is a list of comma-separated keywords (or keyphrases) – like this:

For a short description about the document, you would use description as value for the name attribute and a short text for the value of the content attribute:

The HTML base Element

The <base> tag specifies a default address or a default target for all links on a page:

<head>

</head>

The HTML style Element

The <style> tag is used to define style information for an HTML document.

Inside the style element you specify how HTML elements should render in a browser:

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

The HTML link Element

The <link> tag defines the relationship between a document and an external resource.

The <link> tag is mostly used to link to style sheets:

<head>

</head>

The HTML script Element

The <script> tag is used to define a client-side script, such as a JavaScript.

HTML head Elements

Tag	Description
<head>	Defines information about the document
<title>	Defines the title of a document
<base />	Defines a default address or a default target for all links on a page
<link />	Defines the relationship between a document and an external resource
<meta />	Defines metadata about an HTML document
<script>	Defines a client-side script
<style>	Defines style information for a document

The Body area

The body element defines the document’s body. It contains what you can actually see on your web page.

The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

HTML Headings

H is the element name that stands for “heading”.

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Headings Are Important

HTML headings are to be used for headings only, not to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>

<p>This is another paragraph</p>

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:

<p>This is<br />a para<br />graph with line breaks</p>

The <br /> element is an empty HTML element. It has no end tag but because in future versions of HTML this is not allowed, it is best to use an end tag.

HTML Output

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags

HTML Text Formatting TagsTag Description<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

Nowadays, markup is often kept in a separate CSS file. The exact style figures are explained externally, and one only needs to ‘mark’ part of the document to apply them. This is done by using div tags. For example, <div class=”headermakeuseof”>sometext</div> will look for a headermakeuseof class in the CSS file.

Embedded Images with <IMG>

Here are some of the attributes used in conjunction with the IMG tab.

src=”http://site.com/image.jpg/”

Very important. The source attribute specifies the location of a picture. A picture is never really rendered in a web page, but gets pulled in from an external source. Once you’ve got that address, you’ve got the picture.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for “source”. The value of the src attribute is the URL of the image you want to display.

The URL points to the location where the image is stored. An image named “boat.gif”, located in the “images” directory on “www.w3schools.com” has the URL: http://www.w3schools.com/images/boat.gif.

The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Images – The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The value of the alt attribute is an author-defined text:

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

HTML Images – Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

HTML Lists

The most common HTML lists are ordered and unordered lists:

An ordered list:

The first list item
The second list item
The third list item

An unordered list:

List item
List item
List item

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items are marked with bullets (typically small black circles).

<ul><li>Coffee</li><li>Milk</li>

</ul>

How the HTML code above looks in a browser:

Coffee
Milk

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

<ol>

<li>Coffee</li>

</ol>

How the HTML code above looks in a browser:

Coffee
Milk

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The <dl> tag defines a definition list.

The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

How the HTML code above looks in a browser:

Coffee

– black hot drink

Milk

– white cold drink

HTML List TagsTagDescription

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a definition list

<dt> Defines an item in a definition list

<dd> Defines a description of an item in a definition list

HTML Links

Inside a list item you can put text, line breaks, images, links, other lists, etc.

Links are found in nearly all Web pages. Links allow users to click their way from page to page.

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

To create a link to another document, by using the href attribute
To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link looks like this:

The href attribute specifies the destination of a link.

Example

<a href=”http://www.w3schools.com/”>Visit W3Schools</a>

which will display like this: Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools’ homepage.

The “Link text” doesn’t have to be text. You can link from an image or any other HTML element.

HTML Links – The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window:

Example

<a href=”http://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>

Always add a trailing slash to subfolder references. If you link like this: href=”http://www.w3schools.com/html”, you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this: href=”http://www.w3schools.com/html/”.

Named anchors are often used to create “table of contents” at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.

If a browser does not find the named anchor specified, it goes to the top of the document. No error occurs.

This was the first simple piece of HTML code that I wrote, which included a basic page structure, paragraph text, an unordered list, an H1 heading, an image and a page link.

The difference between HTML and CSS

HTML is responsible for the construction, and the total output, of a page.

Unlike HTML, CSS does not “create” anything instead, it decorates, aligns, and positions elements in HTML. CSS takes the normal HTML output and adds a few rules as to how it’s actually displayed.

CSS can edit things such as element width and height, background color, border, alignment, and actual visibility. HTML is capable of doing some of these things, but not as.

CSS is incorporated into a webpage using Internal markup (In the <head>; in <style> tags) or external markup (From a “.css” file).

Anatomy of a CSS rule

Selector: The standard HTML Tags eg: h1

Property: option for the tag eg. colour, font etc

Value: The actual colour or font

h1 {color:blue; font-size:12px;}

Here h1 is the selector, the color and font size are the Properties and blue and 12pxs are the Values.

HTML and CSS analysis and coding

Categories