HTML – Static Website design Techniques.

HTML- Hypertext Markup Language.

HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, etc. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.

Let’s talk about the web, The web is this fast network of connected computers, and as of now there literally more than a billion website available on public.

So what is the web exactly? well it’s a bunch of connected computers that have websites and spitting out a website, we call that computer a server because it’s serving the website. A website is written using three languages. HTML, for marking up the website content. CSS,for styling it. and JavaScript for making it interactive.

Example of HTML Format and Tag

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>All about rabbits!!</title>
</head>
<body>

<h1>All about rabbits!</h1>

<h2>Basic info</h2>

<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.</p>

<h2>Songs</h2>

<p>Little Bunny Foo Foo, <br>
I don’t want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>



</body>
</html>

All about rabbits!

Basic info

Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.

Songs

Little Bunny Foo Foo, 
I don’t want to see you 
scooping up the field mice 
and bopping them on the head!

HTML Tags:

The contents of an HTML tag are the stuff that goes between the opening and closing tags – this is what we mean when we say “inside” a tag. The contents of a tag can be normal text or a mix of other tags.

Example p tag : <p> content </p>

The closing tag always comes after the content of the tag – it’s how the browser knows that you want the tag to end.

Any content that is visible on your web page should go between the opening <body> tag and the closing </body> tag.

The <h1> and <p> tags are the contents of the <body> tag.

List of HTML Tags: html-tags-chart
List of HTML5 Tags: HTML5 tag list

Basic HTML

TagDescription
<!DOCTYPE> Defines the document type
<html>Defines an HTML document
<head>Defines information about the document
<title>Defines a title for the document
<body>Defines the document’s body
<h1> to <h6>Defines HTML headings
<p>Defines a paragraph
<br>Inserts a single line break
<hr>Defines a thematic change in the content
<!–…–>Defines a comment

Formatting

TagDescription
<acronym>Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<abbr>Defines an abbreviation or an acronym
<address>Defines contact information for the author/owner of a document/article
<b>Defines bold text
<bdi>Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>Overrides the current text direction
<big>Not supported in HTML5. Use CSS instead.
Defines big text
<blockquote>Defines a section that is quoted from another source
<center>Not supported in HTML5. Use CSS instead.
Defines centered text
<cite>Defines the title of a work
<code>Defines a piece of computer code
<del>Defines text that has been deleted from a document
<dfn>Represents the defining instance of a term
<em>Defines emphasized text 
<font>Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text
<i>Defines a part of text in an alternate voice or mood
<ins>Defines a text that has been inserted into a document
<kbd>Defines keyboard input
<mark>Defines marked/highlighted text
<meter>Defines a scalar measurement within a known range (a gauge)
<pre>Defines preformatted text
<progress>Represents the progress of a task
<q>Defines a short quotation
<rp>Defines what to show in browsers that do not support ruby annotations
<rt>Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>Defines a ruby annotation (for East Asian typography)
<s>Defines text that is no longer correct
<samp>Defines sample output from a computer program
<small>Defines smaller text
<strike>Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
<strong>Defines important text
<sub>Defines subscripted text
<sup>Defines superscripted text
<template>Defines a template
<time>Defines a date/time
<tt>Not supported in HTML5. Use CSS instead.
Defines teletype text
<u>Defines text that should be stylistically different from normal text
<var>Defines a variable
<wbr>Defines a possible line-break


Forms and Input

TagDescription
<form>Defines an HTML form for user input
<input>Defines an input control
<textarea>Defines a multiline input control (text area)
<button>Defines a clickable button
<select>Defines a drop-down list
<optgroup>Defines a group of related options in a drop-down list
<option>Defines an option in a drop-down list
<label>Defines a label for an <input> element
<fieldset>Groups related elements in a form
<legend>Defines a caption for a <fieldset> element
<datalist>Specifies a list of pre-defined options for input controls
<output>Defines the result of a calculation

Frames

TagDescription
<frame>Not supported in HTML5.
Defines a window (a frame) in a frameset
<frameset>Not supported in HTML5.
Defines a set of frames
<noframes>Not supported in HTML5.
Defines an alternate content for users that do not support frames
<iframe>Defines an inline frame

Images

TagDescription
<img>Defines an image
<map>Defines a client-side image-map
<area>Defines an area inside an image-map
<canvas>Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption>Defines a caption for a <figure> element
<figure>Specifies self-contained content
<picture>Defines a container for multiple image resources
<svg>Defines a container for SVG graphics

Audio / Video

TagDescription
<audio>Defines sound content
<source>Defines multiple media resources for media elements (<video>, <audio> and <picture>)
<track>Defines text tracks for media elements (<video> and <audio>)
<video>Defines a video or movie

Links

TagDescription
<a>Defines a hyperlink
<link>Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav>Defines navigation links

Lists

TagDescription
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<dir>Not supported in HTML5. Use <ul> instead.
Defines a directory list
<dl>Defines a description list
<dt>Defines a term/name in a description list
<dd>Defines a description of a term/name in a description list

Tables

TagDescription
<table>Defines a table
<caption>Defines a table caption
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
<thead>Groups the header content in a table
<tbody>Groups the body content in a table
<tfoot>Groups the footer content in a table
<col>Specifies column properties for each column within a <colgroup> element
<colgroup>Specifies a group of one or more columns in a table for formatting

Styles and Semantics

TagDescription
<style>Defines style information for a document
<div>Defines a section in a document
<span>Defines a section in a document
<header>Defines a header for a document or section
<footer>Defines a footer for a document or section
<main>Specifies the main content of a document
<section>Defines a section in a document
<article>Defines an article
<aside>Defines content aside from the page content
<details>Defines additional details that the user can view or hide
<dialog>Defines a dialog box or window
<summary>Defines a visible heading for a <details> element
<data>Links the given content with a machine-readable translation

Meta Info

TagDescription
<head>Defines information about the document
<meta>Defines metadata about an HTML document
<base>Specifies the base URL/target for all relative URLs in a document
<basefont>Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document

Programming

TagDescription
<script>Defines a client-side script
<noscript>Defines an alternate content for users that do not support client-side scripts
<applet>Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<embed>Defines a container for an external (non-HTML) application
<object>Defines an embedded object
<param>Defines a parameter for an object
Loader Loading...
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab

More HTML tags

Example - HTML lists

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>HTML: Lists</title>
</head>
<body>

<h1>All about rabbits!</h1>

<h2>Why rabbits make great pets</h2>

<ul>
<li>They’re furry!</li>
<li>Great listeners!</li>
<li>Eat all your leftover carrots!</li>
</ul>

<h3>Top 3 most famous rabbits</h3>

<ol>
<li>Bugs bunny</li>
<li>Easter Bunny</li>
<li>Thumper</li>
</ol>

<h2>Basic info</h2>

<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human <em>ever</em> has</strong>.</p>

<h2>Songs</h2>

<p>Little Bunny Foo Foo, <br>
I don’t want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>

</body>
</html>

All about rabbits!

Why rabbits make great pets

  • They’re furry!
  • Great listeners!
  • Eat all your leftover carrots!

Top 3 most famous rabbits

  1. Bugs bunny
  2. Easter Bunny
  3. Thumper

Basic info

Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.

Songs

Little Bunny Foo Foo, 
I don’t want to see you 
scooping up the field mice 
and bopping them on the head!

Example HTML - Images

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>HTML: Images</title>
</head>
<body>

<h1>All about rabbits!</h1>

<img src=”https://www.kasandbox.org/programming-images/animals/rabbit.png” alt=”Rabbit with lop ears in barn” width=”203″>

</body>
</html>

All about rabbits!

Rabbit with lop ears in barn

CSS - Cascading Style Sheets

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS - ID - # - Example

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>CSS: Selecting by id</title>
<style>

h2 {
color: rgb(0, 232, 15);
}

p {
color: rgb(191, 0, 255);
}

#rabbits-song {
background-color: yellow;
}

#rabbits-info-heading {
background-color: purple;
}
</style>
</head>
<body>

<h1>All about rabbits!</h1>

<h2 id=”rabbits-info-heading”>Basic info</h2>

<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human <em>ever</em> has</strong>.</p>

<h2>Songs</h2>

<p id=”rabbits-song”>Little Bunny Foo Foo, <br>
I don’t want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>


<img src=”https://www.kasandbox.org/programming-images/animals/rabbit.png” alt=”Rabbit with lop ears in barn” width=”203″>

<h3>Why rabbits make great pets</h3>

<ul>
<li>They’re furry!</li>
<li>Great listeners!</li>
<li>Eat all your leftover carrots!</li>
</ul>

<h3>Top 3 most famous rabbits</h3>

<ol>
<li>Bugs bunny</li>
<li>Easter Bunny</li>
<li>Thumper</li>
</ol>


</body>
</html>

CSS: Selecting by id

All about rabbits!

Basic info

Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.

Songs

Little Bunny Foo Foo,
I don't want to see you
scooping up the field mice
and bopping them on the head!

Rabbit with lop ears in barn

Why rabbits make great pets

  • They're furry!
  • Great listeners!
  • Eat all your leftover carrots!

Top 3 most famous rabbits

  1. Bugs bunny
  2. Easter Bunny
  3. Thumper

CSS - CLASS - . dot- Group - Example

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>CSS: Selecting by class</title>
<style>



#rabbits-info-heading {
background-color: purple;
}



.song-lyrics {
background-color: yellow;
}

</style>
</head>
<body>

<h1>All about rabbits!</h1>

<h2 id=”rabbits-info-heading”>Basic info</h2>

<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human <em>ever</em> has</strong>.</p>

<h2>Songs</h2>

<p class=”song-lyrics”>Little Bunny Foo Foo, <br>
I don’t want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>

<p class=”song-lyrics”>And down came the Good Fairy <br>
And she said <br>
“Little bunny Foo Foo <br>
I don’t like you’re attitude <br>
Scooping up the field mice <br>
And bopping ’em on the head” <br>
</p>

<p class=”song-lyrics”>I’ll give you 3 chances. <br>
Then I’ll turn you into a goon! <br>
The next day…</p>

<img src=”https://www.kasandbox.org/programming-images/animals/rabbit.png” alt=”Rabbit with lop ears in barn” width=”203″>

<h3>Why rabbits make great pets</h3>

<ul>
<li>They’re furry!</li>
<li>Great listeners!</li>
<li>Eat all your leftover carrots!</li>
</ul>

<h3>Top 3 most famous rabbits</h3>

<ol>
<li>Bugs bunny</li>
<li>Easter Bunny</li>
<li>Thumper</li>
</ol>


</body>
</html>

CSS: Selecting by class

All about rabbits!

Basic info

Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.

Songs

Little Bunny Foo Foo,
I don't want to see you
scooping up the field mice
and bopping them on the head!

And down came the Good Fairy
And she said
"Little bunny Foo Foo
I don't like you're attitude
Scooping up the field mice
And bopping 'em on the head"

I'll give you 3 chances.
Then I'll turn you into a goon!
The next day…

Rabbit with lop ears in barn

Why rabbits make great pets

  • They're furry!
  • Great listeners!
  • Eat all your leftover carrots!

Top 3 most famous rabbits

  1. Bugs bunny
  2. Easter Bunny
  3. Thumper