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>

  1. HTML tags are normally comes in pairs like <h1> and </h1>.
  2. The first tag in a pair is the start tag and the second tag is the end tag.
  3. The end tag is written like the start tag, but with a forward slash inserted before the tag name.
  4. 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?


  1. HTML stands for Hypertext Markup Language. 
  2. HTML is the standard markup language for creating web pages and web applications. 
  3. we can create static web pages using HTML. but when we create web applications we have to use CSS (Cascading Style Sheets) and JavaScript. 
  4. we can use html tags to write a web page. 
  5. HTML elements like the building blocks of HTML pages. 
  6. 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.


How to Face an Interview Successfully