HTML Div

Html – Div element

The Tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS.
• id
• width
• height
• title
• style

For the purpose of this example, we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewers.
HTML Code:

<div style=”background: green;”>
<h5>SEARCH LINKS</h5>
<a href=”http://www.google.com” target=”_blank”>Google</a>
</div>

OUTPUT:

SEARCH LINKS

Google

Above is a great visual about how a div plays the role of a container for other HTML elements, applying a background color/image is the only real way to visualize your div tags.

Html – Div Layouts

When HTML first began, web creators only had two choices. A table layout, orframes. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.
HTML Code:

<div id=”menu”><a>HOME</a> |
<a>CONTACT</a> |
<a>ABOUT</a></div>
<div id=”content”>
<h5>Content Articles</h5>
This paragraph would be your content paragraph with all of your readable material.
</div>

OUTPUT:

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with. Let’s add a “LINKS” page to our menu, and another article of content below the existing content.

HTML Div Layout II

HTML Code:

<div align=”right” >
<a href=””>HOME</a> |
<a href=””>CONTACT</a> |
<a href=””>ABOUT</a> |
<a href=””>LINKS</a>
</div>

<div align=”left” >
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
<h5 >Content Article Number Two</h5>
<p>Here’s another content article right here.</p>
</div>

OUTPUT:

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Content Article Number Two

Here’s another content article right here.

HTML FORMS

HTML Forms

HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.
A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

HTML Forms – The Input Element

The most important form element is the input element.The input element is used to select user information.An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

The most used input types are described below.


Text Fields:

Input Fields

<input type=”text”/> defines a one-line input field that a user can enter text into:

<form>
First name: <input type=”text” name=”firstname” /><br />
Last name: <input type=”text” name=”lastname” />
</form>

OUTPUT:

First name:
Last name:

Note:
The form itself is not visible. Also note that the default width of a text field is 20 characters.


Password Field

<input type=”password” name=”password”/> defines a password field:

<form>Password: <input type=”password” name=”password” /></form>

OUTPUT:
Password:

Note: The characters in a password field are masked (shown as asterisks or circles).


Radio Buttons

<input type=”radio” /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices:

<form>
<input type=”radio” name=”sex” value=”male” /> Male<br />
<input type=”radio” name=”sex” value=”female” /> Female
</form>

OUTPUT:

Male Female


Checkboxes

<input type=”checkbox” /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

<form>
<input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike<br />
<input type=”checkbox” name=”vehicle” value=”Car” /> I have a car
</form>

OUTPUT:

I have a bike I have a car


Submit Button

<input type=”submit” /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input:

<form name=”myForm” action=”html_form_action.php” method=”get”>
Username: <input type=”text” />
<input type=”submit” value=”Submit” />
</form>

OUTPUT:
Username:

If you type some characters in the text field above, and click the “Submit” button, the browser will send your input to a page called “html_form_action.php”. The page will show you the received input.


Reset buttons

The final type of input is the reset button. Setting the type to reset will place a button within your form to reset each field when clicked. Users enjoy having a “start over” button such as the reset button in case they begin filling out the wrong information in a major way.

<input type=”reset” value=”Reset Fields” />
<input type=”reset” value=”Start Over” />

OUTPUT:


Textareas

Textareas retrieve “blog” type information from the user. Paragraphs, essays, or memos can by cut and pasted into textareas and submitted. Textareas have an opening and a closing tag, any words placed between them will appear inside your text area.

<textarea>Text Area!</textarea>

Default Textarea:

 

Textarea cols and rows

Adjusting the size of the appearance of the text area requires two attributes,cols and rows. Use a numeric value for each attribute and the larger the value the larger the field will appear.

<textarea cols=”20″ rows=”10″>Text Area!</textarea>
<textarea cols=”40″ rows=”2″>Text Area!</textarea>
<textarea cols=”45″ rows=”5″>Text Area!</textarea>

Bigger Text Areas:



A text area could take up an entire page if required.

Textarea wrap

The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings:

  • soft
  • hard
  • off

Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).

Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box.

Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

<textarea cols=”20″ rows=”5″ wrap=”hard”>
As you can see many times word wrapping is often the desired
look for your textareas. Since it makes everything nice and
easy to read.
</textarea>

OUTPUT:

html – textarea readonly

Settting a yes or no value for the readonly attribute determines whether or not a viewer can manipulate the text inside the text field.

<textarea cols=”20″ rows=”5″ wrap=”hard” readonly=”yes”>
As you can see many times word wrapping is often the desired
look for your text areas. Since it makes everything nice and
easy to read.
</textarea>

OUTPUT:

Now you may not change the text inside the text area. However, you can still highlight or Ctrl-C and copy the texts.

Textarea disabled

As the readonly attribute disables text manipulation, we can take things one step further by setting the disabled attribute. This grays out the textarea altogether and inhibits any change in the text as well as text highlighting.

<textarea cols=”20″ rows=”5″ wrap=”hard” disabled=”yes”>
As you can see many times word wrapping is often the desired
look for your text areas. Since it makes everything nice and
easy to read. </textarea>

OUTPUT:


Upload forms

Use an upload form to allow users to upload pictures, movies, or even their own webpages. An upload form is another type of input form, simply set the type attribute to file.

<input type=”file” />

Upload Form:

max file size
To limit the size of the file being uploaded and saving you precious webserver space. We make use of a hidden input field and set a few specific attributes.

<input type=”hidden” name=”MAX_FILE_SIZE” value=”500″ />
< input type=”file”/>

Max File Size:

The value specified is the maximum allowable KB to be uploaded via this form. A value of 100 will allow a file up to 100kb.


Selection forms and drop down lists

Drop down lists are the basic selection forms. You have probably seen them already on the internet, maybe filling out a personal profile and selecting the state in which you live. Drop down lists have several options a user can select.

<select>
<option>California — CA</option>
<option>Colorado — CO</option>
<option>Connecticut — CN</option>
</select>

Drop Down List:

By default the first coded <option> will be displayed or selected as the default. We can change this using the selected attribute.

<select>
<option>California — CA</option>
<option>Colorado — CO</option>
<option selected=”yes”>Conneticut — CN</option>
</select>

Drop Down List:

Selection forms

We use the size attribute to break out from the single displayed drop down list.

<select size=”3″>
<option>California — CA</option>
<option>Colorado — CO</option>
<option>Connecticut — CN</option>
</select>

OUTPUT:

Selecting multiples

We can further add to our selection forms by adding the multiple attribute. This allows the user to select more than one entry from your selection forms. Obviously this attribute does not work with the single drop down lists.

<select multiple=”yes” size=”3″>
<option>California — CA</option>
<option>Colorado — CO</option>
<option>Connecticut — CN</option>
</select>

OUTPUT:

Now the user may select any or all states that apply to them.

HTML List

There are 3 different types of lists.

  • <ul> – unordered list; bullets
  • <ol> – ordered list; numbers
  • <dl> – definition list; dictionary

The most common HTML lists are ordered and unordered lists:

HTML Lists

An ordered list:

  1. The first list item
  2. The second list item
  3. The third list item

An unordered list:

  • List item
  • List item
  • List item

HTML Unordered Lists

An unordered list starts with the <ul> tag. An unordered list is a list of items. With bullets the list items are marked (typically small black circles).

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

<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
In three flavors the bullet comes :
squares <ul type=”squares” >
discs <ul type=”discs” >
circles <ul type=”circles”>
<ul type=”square” >
<li>list item1</li>
<li>list item2</li>
</ul>
OUTPUT:

  • list item1
  • list item2
<ul type=”disc”>
<li>list item1</li>
<li>list item2</li>
</ul>
OUTPUT:

  • list item1
  • list item2
<ul type=”circle” >
<li>list item1</li>
<li>list item2</li>
</ul>
OUTPUT:

  • list item1
  • list item2

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>Books</li>
<li>Pen</li>
</ol>

How the HTML code above looks in a browser:

  1. Books
  2. Pen
There are 4 other types of ordered lists. You can replace generic numbers with
Roman numberals or letters,both capital and lower-case.
Use the type attribute to change the numbering.
<ol type=”a”>
<li>list item1</li>
<li>list item2</li>
</ol>
OUTPUT:

  1. list item1
  2. list item2
<ol type=”A”>
<li>list item1</li>
<li>list item2</li>
</ol>
OUTPUT:

  1. list item1
  2. list item2
<ol type=”i”>
<li>list item1</li>
<li>list item2</li>
</ol>
OUTPUT:

  1. list item1
  2. list item2
<ol type=”I”>
<li>list item1</li>
<li>list item2</li>
</ol>
OUTPUT:

  1. list item1
  2. list item2

HTML Definition Lists

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

A definition list starts with the <dl> tag.
Each definition-list term starts with the <dt> tag.
Each definition-list description starts with the <dd> tag.

<dl>
<dt>Book</dt>
<dd>- history book</dd>
<dt>Pen</dt>
<dd>- Ball Point</dd>
</dl>

How the HTML code above looks in a browser:

Books
– history book

Pen
– Ball point


Basic Notes – Useful Tips

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

HTML Images

HTML Images – The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

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.

Syntax for defining an image:

<img src=”url” alt=”some_text“/>

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

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:

<img src=”baby.png” alt=”Small Baby” />

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:

<img src=”pulpit.jpg” alt=”Pulpit rock” width=”304″ height=”228″ />

Tip: 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).


Basic Notes – Useful Tips

Note: If an HTML file contains ten images – eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.

IMG
IMG stands for “image.”

It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.

SRC
SRC stands for “source.” This again is an attribute, a command inside a command. The value of the src attribute is the URL of the image you want to display on your page. It’s telling the browser where to go to find the image. Again, it’s best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone. If you start to place your images all over the place, you’ll have to start adding directories and sub-directories to the SRC attribute. And at this point, that is way too confusing. Just place the image in the same place as the HTML document that will call for it and then call for the image by name alone. You can get fancy later. Right now, let’s just get it to work.
image.gif
image.gif is the name of the image. Notice it’s following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).
ALT
ALT stands for “alternate text”. This tells the browser that if it can’t find the image, then just display this text. It also tells anyone who can’t view your image what the image is about.

Image Formats
There are four basic formats you will find on the World Wide Web
.gif
gif This is pronounced “jif” or “gif” (hard “G”) depending on whom you speak to. I have always said “jif”, like the peanut butter. This is an acronym for Graphics Interchange Format. The format was invented by Compuserve and it’s very popular. The reason is that it’s a simple format. It’s a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television’s picture is created much the same way. Browsers can handle this format quite easily.
.png
.png .png Pronounced as ‘ping’, this stands for Portable Network Graphic. This is ultimately the replacement for .gif, with partial transparency options, but browser support is sometimes disappointing, so try experimenting but don’t expect miraclesin older browsers! Even some of the newer ones don’t like partial transparency.
.jpeg or .jpg
.jpeg or .jpg (pronounced “j-peg”) There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it’s been created.

.bmp

.bmp (pronounced “bimp”) This is a “bitmap.” You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.
Even though Internet Explorer will allow you to place an image as a BMP, I wouldn’t. No other browsers will be able to display it. Go with .gif or JPEG.

HTML Tags

HTML Tags

Informally, HTML elements are sometimes referred to as “tags”, though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.

  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • HTML tags normally come in pairs like <i> and </i>
  • The first tag in a pair is the start tag(<i>), the second tag is the end tag(</i>)
  • The element content is the text between the start and end tags
  • HTML tags are not case sensitive, <b> means the same as <B>

Why do We Use Lowercase Tags?

Start using lowercase tags, if you want to prepare yourself for the next generations of HTML. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML – the next generation HTML – demands lowercase tags.

HTML Basic Tags

  • The basic tags include <HTML>, <title>, <meta>, and <body>.

<HTML>

This tag is used to indicate that this is an HTML document.

This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is not displayed in the main window of the browser.

<title>

This tag indicates the title of this HTML page. The title is what is displayed on the upper left corner of the browser when you view a web page. For example, right now you can see there “Basic Tags: HTML, head, title, meta, body”. That is the title of this page.

The title tag is important when it comes to search engine ranking. Many of the search engines pay special attention to the text in the <title> tag. This is because (logically) that words in the <title> tag indicate what the page content is.

<meta>

The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is used for the author of the HTML page to record information related to this page. Two common attributes are name and content. The <meta> tag used to hold great importance in search engine optimization, with authors carefully drafting what’s inside the tag to gain better search engine ranking, but recently its importance has been decreasing steadily.

<body>

The <body> tag includes the HTML body of the document. Everything inside the <body> tag (other than those within the <script> tag) is displayed on the browser inside the main browser window.
The <body> tag may contain several attributes. The most commonly used ones are listed below:
  • bgcolor: This is the background color of the entire HTML document, and may be specified either by the color name directly or by the six-digit hex code.
  • alink: The color of the links.
  • vlink: The color of the visited links.
  • topmargin: The margin from the top of the browser window.
  • leftmargin: The margin from the left of the browser window.

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.

Line Breaks

The <br> tag is used when you want to end a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
<!– This is a comment –>
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

<font>

The <font> tag is used to change the format of the text on the web page.
The most important attributes are as follows:
face: The type of font. Common ones include “Time New Roman”, “Verdana”, and “Helvetica.”
size: This indicates the size of the text. This can be absolute (0 .. 6), or relative (“+1”, … or “-1”,…)
color: This attribute indicates the color of the text. Either the color name or the six-character color code may be used to specify color.
<font size=2 face=”Helvetica” color=red>This illustrates the attributes of the font tag.</font>

HTML Text Formatting Tags

HTML defines a lot of elements for formatting output, like bold or underline text.

<b>

The <b> tag will bold the text inside the tag.

<i>

The <i> tag will italicize the text inside the tag.

<u>

The <u> tag will underline the text inside the tag.

<center>

The <center> tag causes all the text within the tag to be centered.

<p>

The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often used by itself, without a corresponding closing tag.

<big>

Defines big text

<em>

Defines emphasized 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

“Computer Output” Tags

<code>

Defines computer code text

<kbd>

Defines keyboard text

<samp>

Defines sample computer code

<tt>

Defines teletype text

<var>

Defines a variable

<pre>

Defines preformatted text
Why do We Use Lowercase Tags?
Start using lowercase tags, if you want to prepare yourself for the next generations of HTML. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML – the next generation HTML – demands lowercase tags.

HTML Elements

An HTML element indicates structure in an HTML document and a way of arranging content hierarchically. An HTML element is an SGML element that meets the requirements of one or more of the HTML DTDs (Document Type Definitions ). These elements have properties: both attributes and content, as specified (both allowable and required) according to the appropriate HTML DTD . Elements may represent paragraphs, headings, hypertext links, lists, embedded media, and a variety of other structures.
  • HTML documents are text files made up of HTML elements.
  • HTML elements are defined using HTML tags.
HTML Tags
Informally, HTML elements are sometimes referred to as “tags”, though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.
  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • HTML tags normally come in pairs like <i> and </i>
  • The first tag in a pair is the start tag(<i>), the second tag is the end tag(</i>)
  • The element content is the text between the start and end tags
  • HTML tags are not case sensitive, <b> means the same as <B>

The Basic Html tags are explained below:

<HTML>
This tag is used to indicate that this is an HTML document. Most HTML documents should start and end with this tag.
<head>
This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is not displayed in the main window of the browser.
<title>
This tag indicates the title of this HTML page. The title is what is displayed on the upper left corner of the browser when you view a web page. For example, right now you can see there “Basic Tags: HTML, head, title, meta, body”. That is the title of this page.

The title tag is important when it comes to search engine ranking. Many of the search engines pay special attention to the text in the <title> tag. This is because (logically) those words in the <title> tag indicate what the page content is.

<meta>
The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is used for the author of the HTML page to record information related to this page. Two common attributes are name and content. The <meta> tag used to hold great importance in search engine optimization, with authors carefully drafting what’s inside the tag to gain better search engine ranking, but recently its importance has been decreasing steadily.

Hyper Text Markup Language (HTML)

Introduction to HTML

HTML stands for Hyper Text Markup Language. HTML was invented by Tim Berners-Lee, who was then working as a computer and networking specialist at a Swiss research institute. He wanted to give the Institute’s researchers a simple markup language, which would enable them to share their research papers via the Internet. Berners-Lee based HTML on Standard Generalized Markup Language (SGML), an international standard for marking up text for presentation on a variety of physical devices.

An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page An HTML file must have an .htm or .HTML file extension.

An HTML file can be created using a simple text editor like notepad or wordpad.

Creating an HTML document
Creating an HTML document is very easy. To begin coding HTML , need only two things: a simple-text editor and the dedication to follow this tutorial! Notepad is the most basic of simple-text editors and you will probably code a good amount of HTML with it.HTML is platform independent, you will need to save your HTML files in standard text format. The easy way to do this is use a text editor program like notepad.exe in Windows, pico in Linux, and the like.
<html><head>

<title>My Sample page Title</title>

</head>

<body>

<h1> This is my First Html Page </h1>

</body>

</html>

Put the above code in a text file as save the page as “sample.html”.  This will create your first html document.

HTML Tags

HTML markup tags are usually called HTML tags

  • HTML tags are keywords surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • Start and end tags are also called opening tags and closing tags
HTML Element
An HTML element indicates structure in an HTML document and a way of arranging content hierarchically. An HTML element is an SGML element that meets the requirements of one or more of the HTML DTDs (Document Type Definitions ). These elements have properties: both attributes and content, as specified (both allowable and required) according to the appropriate HTML DTD . Elements may represent paragraphs, headings, hypertext links, lists, embedded media, and a variety of other structures.
  • HTML documents are text files made up of HTML elements.
  • HTML elements are defined using HTML tags.