HTML Paragraph


  • HTML Paragraph
    Paragraphs in the HTML document define by <p> tag. 
    Ex: <p>Paragraph 1 </p> 
          <p>Paragraph 2 </p> 

    Normally brosers automatically add an empty line before & after a paragraph.     Therefore does not needed to add line break. Remember that closing tag of the paragraph tag. Without closing tag it produce unexpected result or error.
    Inside the paragraph you can break lines by <br /> tag.
    Ex:     <p> This is the 1st line of the paragraph <br />
                  This is the 2nd line of the paragraph</p>


  • Why use <br />  tag instead of <br>
    It is a coding standard coming to allow in future for all browsers that is all tags required to close properly.
No comments:
Labels: ,

HTML Basics


  • Horizontal Lines
    Horizontal     Lines in the HTML document define by <hr /> tag.
    Ex: <h1>Heading 1 </h1>
           <hr />
           <p> This is the paragraph</p>


  • New Line
    <br> tag defines new line in the html document
    Ex: <p> No: 50, <br />
    Galle Rd, <br />
    Colombo 05. </p>


  • HTML Comments
    For the purpose of maintaining more readability & understandability of the code, programmers use comments. HTML also supports for comments.
    Ex: <!-- This is an HTML comment -->
No comments:
Labels: ,

HTML Attributes


  • HTML Attributes

    • HTML elements can have attributes to provide additional information
    • Attributes are always specified in the start tag
    • Attributes come in name vale pairs and both of them are case insensitive.
      Ex: <img src = "mypic.jpg" /> images are define with img tag and the path of the image specified in the src attribute


  • Attribute Name Value pairs
    Attribute values always be enclosed in quotes. Most commonly used double quotes, but single quotes are also applicable Ex: <p align = "center">
    * Sometimes attribute values itself contain quotes, it is necessary to use single quotes Ex: name = 'Bill "president" Clington'
No comments:
Labels: ,

HTML Elements

  • HTML Elements 
    • An HTML element start with an Opening Tag and ends with a Closing Tag.
      Ex: <p>----</P>
    • Between the Opening tag & ending tag called Element Content
    • Some HTML elements which are called Empty Elements closed in the start tag.
      Ex: <img src = "myImage.jpg"  />
    • Most HTML elements can have additional information than the element whic are called Attributes
      Ex: <p align = "Center"> This is the Paragraph</p>
      • The <p> element defines a paragraph in the HTML Document
      • The element has a opening tag <p> and its enfing tag </p>
      • The element Content is "This is the Paragraph"
      • No case sensitive because you can define <p>..... </P> or <P>... </p>
      • The attribute of this element is align it describe the alignment of the paragraph.
No comments:
Labels: , ,

HTML - Basics


HTML Basics
  • HTML Links
    HTML Links are defined with the <a> tag and the linked location specified to href attribute. 
    Ex:
    1. <a href = "http://programmingforbeginers.blogspot.com/"> This is a Link to our forum </a> 
    2. <a href = "#"> This is a link to same location </a>


  • HTML Images  
    HTML Images are defined with the <img> tag and defining the image path with "Src" attribute. 
    Ex:
    1. <img src = "myImage.jpg" /> This tag loads the image with its original size.
    2.     <img src = "myImage.jpg" width = "100" height = "100"/> This tag attributes change the image size.


  • HTML Elements
    • An HTML element start with an Opening Tag and ends with a Closing Tag.
      Ex: <p>----</P>
    • Between the Opening tag & ending tag called Element Content
    • Some HTML elements which are called Empty Elements closed in the start tag.
      Ex: <img src = "myImage.jpg"  />
    • Most HTML elements can have additional information than the element whic are called Attributes
      Ex: <p align = "Center"> --------</p>


  • Nested HTML Elements
    Most of the HTML elements can contain other HTML elements. This is calling nested elements.
    Ex:
    1.
    <html>
       <head>
          -----
          -----
       </head>
    </html>


  • HTML Attributes
    • Most HTML elements can have attributes.
    • Attributes provide further information about the element 
    • Always specified in the opening tag
    • Attributes come in name-value pairs.
No comments:
Labels: , ,

HTML - Basics

HTML Basics
  • HTML Headings
    HTML Headings are defined with <h1> to <h6> tags.  <h1> is the largest font size for header & <h6> is the smallest font. All the opening tags of header tags closed
    Opening & Closing tag pairs can be
    either;
    <h1> </h1>  
    <h2> </h2>  
    <h3> </h3> 
    <h4> </h4> 
    <h5> </h5> 
    <h6> </h6>

    Or
    <h1>    </h>  
    <h2> </h>  
    <h3> </h> 
    <h4> </h> 
    <h5> </h> 
    <h6> </h>

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

     
  • HTML Paragraph
    HTML Paragraph defines with <p> & </p> tag pair.

    Sample Code :
    <p>This is 1st paragraph</p>
    <p>This is 2nd paragraph</p>
No comments:
Labels: , ,

HTML - Basics

HTML Basic Tags

  • <html>
    The Text between <html> & </html> describes the HTML Document (Web Page). 
  • <body>
    The Text between <body> & </body> describes the visible page content of HTML Document.
  • <title>
    The text between <title> & </title> defines the title of the web browser.
  • <head>
    Header section of the HTML document consistes in between <head> & </head>.
How to write an HTML Document?
  1. Open a notepad
  2. Enter following Sample web page
  3. Save the notepad with ".html" or ".htm" extension.
  4. Open the document with a web browser (ex: Internet Explorer, Mozilla Firefox)

Sample Web Page
<html>
 <head>
  <title>Hello World</title>
 </head>
 <body>
Hi!... This is my First Web Page.
</body>
</html>
No comments:
Labels: , ,

HTML - Getting Started

Needs for HTML
  • Does not needed specific tool for writing HTML Documents. A plain text editor also can be used to  create HTML Documents. Use of a Plain Text Editor is the best way to learn HTML.

For editing and writing HTML Documents you can use many different editors such as Dreamweaver, Visual Studio, Front Page & etc. However, in this tutorial I use a plain text editor (ex: notepad, wordpad) to edit HTML Documents. 

 File Extension

 File extension of saved HTML document can be a .html or a .htm & there is no difference.
No comments:
Labels: ,

HTML - Introduction

This chapter describes how to create a website using HTML tags & supports beginers to be an expert in web site development. 

 What is HTML?

 HTML is a Markup Language using for displaying web pages and other information that can be displayed in a web browser. 

  • HTML stands for Hyper Text Markup Language
  • HTML is not a programing Language. It is a markup language.

HTML Tags
  • HTML markup tags are usually called HTML Tags.
  • HTML Tags use to describe web pages.
  • HTML Tags are indicated by angle brackets within the web page. (ex: <html>, <body>)
  • HTML tags mostly come with opening & closing pairs of tags. (ex: <html> </html>)
  • Rest of the tags are come with unpaired tags which are known as empty elements. (ex: <br>, <img>)
  • In between these tags, can add texts, comments & other type of text-based contents.

Sample HTML

<html>
 <head>
  <title>Hello, This is my First Web Page  </title>
 </head>
 <body>
  <h2>Hello, Welcome </h2> <h3>to my Web Page. This is my first experience with HTML </h3>
 </body>
</html>

1 comment:
Labels: ,
Subscribe to: Posts (Atom)