ITGeek

Saturday, August 25, 2018

Friday, June 1, 2018

Web Programming Lessons - HTML - Lists

In HTML, there are three kinds of lists, each appropriate for a different kind of information. An unordered list made with <ul> and </ul> tags is meant for elements that have no order or the order is unimportant (typically shown with bullets). An ordered list created using the <ol> and </ol> tags is typically shown with numbers and is used for elements whose order matters such as a sequence of steps to perform. Finally, there are definitions lists, created with <dl> and </dl> tags.

Ordered Lists

Ordered lists provide a list of items, each of which are preceded by an incremental number starting from 1.
Sample HTML:

  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>

Example rendering:

First item
Second item
Third item

Unordered Lists

Unordered lists display a list of items, each of which is prefixed by a bullet.
Sample HTML:

  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

Example rendering:

First item
Second item
Third item

Definition Lists

Definition lists display a list of bolded terms, followed by the definition on a new line and prefixed by a tab (by default).
Sample HTML:

  <dl>
    <dt>Term 1</dt>
    <dd>Definition of Term 1</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

Example rendering:

Term 1: Definition of Term 1
Term 2: Definition of Term 2

If two terms share the same definition they can be grouped together like so:

  <dl>
    <dt>Cascading Style Sheets</dt>
    <dt>CSS</dt>
    <dd>Definition of Cascading Style Sheets (aka CSS)</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

Example rendering:

Cascading Style Sheets
CSS: Definition of Cascading Style Sheets (aka CSS)
Term 2: Definition of Term 2

If a term has two alternative definitions use a separate dd element for each definition, e.g.

  <dl>
    <dt>Mouse</dt>
    <dd>Small mammal</dd>
    <dd>Input device for a computer</dd>
  </dl>

Example rendering:

Mouse: Small mammal; Input device for a computer

Longer definitions can be broken up into paragraphs by nesting p elements within the dd element.

  <dl>
    <dt>Term 2</dt>
    <dd>
      <p>First paragraph of the definition.</p>
      <p>Second paragraph of the definition.</p>
    </dd>
  </dl>

Example rendering:

Term 2: First paragraph of the definition.
Second paragraph of the definition.

Nested Lists

Lists can be nested. An example:

<ul>
  <li>Lists     
    <ul>
      <li>Numbered Lists</li>
      <li>Unnumbered Lists</li>
    </ul>
  </li>
</ul>

Example rendering:

Lists
- Numbered Lists
- Unnumbered Lists

When nesting, nested list elements should be within a parent list item element.
An example of incorrect nesting:

<ul>
  <li>Lists</li>
  <ul>
    <li>Numbered Lists</li>
    <li>Unnumbered Lists</li>
  </ul>
</ul>

A further example of incorrect nesting, with two consecutive UL elements:

<ul>
   <li>
      Outer list item
      <ul>
        <ul>
          <li>
            Inner list item within two consecutive UL elements
          </li>
        </ul>
      </ul>
   </li>
</ul>

Web Programming Lessons - HTML - Tables

Use

The code:
<table>
<tr>
<td>TITLE 1</td>
<td>TITLE 2</td>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>

Will output:

TITLE 1	TITLE 2
Contents 1	Contents 2
Contents 3	Contents 4

Example :

Tuesday, May 22, 2018

Web Programming Lessons - HTML - Images

Let us start with a quick minimum example:

<img src="abc.jpg" />

Result :

And let us also have a look at more extended example:

<img src="abc.jpg" alt="Photograph of abc"
     title="Photograph of abc" />

Images are normally stored in external files. To place an image into an HTML source, use the img tag with the src attribute containing the URL of the image file. To support browsers that cannot render images, you can provide the alt attribute with a textual description of the image. To provide a tooltip to the image, use the titleattribute.

The space before the /> in the examples is there on purpose. Some older browsers behave strangely if the space is omitted.

Web Programming Lessons - HTML - Links

Hyperlinks are the basis of navigation of the internet. They are used for moving around among sections of the same page, for downloading files, and for jumping to pages on other web servers.

Let us start with a quick example:

To learn more, see <a href="http://www.google.lk">Google</a>.

Result :

By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Web Programming Lessons - HTML - Paragraphs

The p element is used to split text into paragraphs.

Example :

<p>This is a paragraph 1</p>

<p>This is a paragraph 2</p>

<p>This is a paragraph 3</p>

Result :

Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).

Web Programming Lessons - HTML - Headings

HTML defines 6 levels of Headings.

Example :

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Result :

the higher the heading level number, the greater it's importance — so <h1> defines the most important heading, whereas the <h6>defines the least important heading in the document.

Wednesday, May 9, 2018

Web Programming Lessons - HTML - Attributes

HTML Attributes

HTML 5 attributes are written inside the element's tag and separated by spaces. all of HTML elements can have Attributes.

we can provide additional information about an element using HTML attributes.Attributes are always specified in the start tag.

Attributes give extra information about an element for example in the input element the attribute type gives the type of input, so if he had type="button" we would get a button instead of a text-box. Attributes are very important to HTML and without them Web development would be probably much harder.

EX : -

<input type="text" value="hello Web"/>
<a href="https://www.google.com">This is a link</a>

The Id Attribute

The Id attribute is a unique Identifier for the element.The Id property becomes very useful when using CSS and JavaScript.An example of the Id Attribute.

<form id="htm_form">
</form>

The name Attribute

The name Attribute specifies a name for an element.Conventionally groups if elements can have the same name.

The class attribute

This specifies the style class under which an element falls. NB:An Attribute can also be called a property

Web Programming Lessons - HTML - Elements

What is an Element in HTML?

The HTML Element is everything from the start tag to the end tag. HTML 5 has different kinds of HTML elements. let's study about that elements in this lessons.

EX : - <p>My first paragraph.</p>

(element content is displayed in red color)

What is a Nested Html Element?

The content of an HTML element can be another element,when this happens it forms a nested element.

EX : - <head>

<title>ITGEEK</title>

</head>

<html> ➡ defines the whole document.
<body> ➡ defines the document body.
<h1> ➡ defines a heading.
<p> ➡ defines a paragraph.

Web Programming Lessons - HTML - Versions

There are many major versions in HTML

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

Web Programming Lessons - HTML - Tags

HTML Tags

HTML tags are element names surrounded by angle brackets.

<tagname>content goes here...</tagname>

HTML tags are normally comes in pairs like <h1> and </h1>.
The first tag in a pair is the start tag and the second tag is the end tag.
The end tag is written like the start tag, but with a forward slash inserted before the tag name.
The start tag is also called the opening tag, and the end tag the closing tag.

Let's see some special HTML tags.

<!DOCTYPE html> ➤ declaration defines this document to be HTML5
<html> ➤ is the root element of an HTML page
<head> ➤ contains meta information about the document
<title> ➤ specifies a title for the document
<body> ➤ contains the visible page content
<h1> ➤ defines a large heading
<p> ➤ defines a paragraph

This is the HTML page structure

Web Programming Lessons - HTML - Introduction

What is HTML?

HTML stands for Hypertext Markup Language.
HTML is the standard markup language for creating web pages and web applications.
we can create static web pages using HTML. but when we create web applications we have to use CSS (Cascading Style Sheets) and JavaScript.
we can use html tags to write a web page.
HTML elements like the building blocks of HTML pages.
HTML elements are represented by tags.

Simple example for a HTML web page.

Let's start to create a simple web page using HTML.

first create a empty text file and save it in .html format.

then write this HTML code like this.

Finally, open your HTML web page using your web browser.