Difference between revisions of "HTML"

From Grundy
Jump to navigation Jump to search
Line 34: Line 34:
 
*'''TITLE''' : The <code><title></code> element defines the title of the document, which is required in all the HTML documents.  
 
*'''TITLE''' : The <code><title></code> element defines the title of the document, which is required in all the HTML documents.  
  
*'''HEADING''' : The <code><nowiki><h1></nowiki></code> to <code><nowiki><h1></nowiki></code> tags are used to define HTML headings.  
+
*'''HEADING''' : The <code><nowiki><h1></nowiki></code> to <code><nowiki><h6></nowiki></code> tags are used to define HTML headings.  
 
<code><nowiki><h1></nowiki></code> defines the most important heading. This heading has biggest font.  
 
<code><nowiki><h1></nowiki></code> defines the most important heading. This heading has biggest font.  
 
<code><nowiki><h6></nowiki></code> defines the least important heading. This heading has smallest font.  
 
<code><nowiki><h6></nowiki></code> defines the least important heading. This heading has smallest font.  

Revision as of 11:41, 3 May 2020

Ever wondered how people make their blogs or cool websites? We present to you our next comprehensive guide which is specifically aimed at absolute newbies who wish to get started off with HTML

Introduction

Before we get started, it is important to know that HTML is not actual programming, it is a markup language. Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file.

A quick and basic introduction to HTML :

  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • Your HTML code doesn’t show up on the web page. It manifests the content on the same.

Basic HTML Features

  • ELEMENT : An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a typical example of an element, namely, the paragraph element :
<p> 
This is the content
</p>
  • TAGS : They are used to mark the start and the end of an HTML element. These tags are enclosed within angle braces <Tag Name>/. Except few tags, most of the tags have their corresponding closing tags. For example, the break tag, <br> doesn’t have an end tag and hence no content.
  • ATTRIBUTES : An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element's start tag. An element's start tag may contain any number of space separated attribute/value pairs.

Some Basic Elements

Let's get started with some basic elements and the related attributes :

  • HEAD : The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more.
  • BODY : The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Few attributes of this element are bgcolor, text, link, background .
  • TITLE : The <title> element defines the title of the document, which is required in all the HTML documents.
  • HEADING : The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. This heading has biggest font. <h6> defines the least important heading. This heading has smallest font.

  • DIV : The <div> tag defines a division or a section in an HTML document.This tag is used to group block-elements which helps in formatting that section collectively. For example -
<nowiki><div>
content
</div></nowiki>
  • ID

Definition:
#id_name{ definition }
Usage:
<tag id="id name"> content </tag>

  • CLASS

Definition:
.class_name{ definition }
Usage:
<tag class="id name"> content </tag>

  • PARA : The HTML <p> element represents a paragraph of text.

<p>
This is supposed to be a paragraph!
</p>
Few attributes :
align
class
id
style
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
http://www.comptechdoc.org/independent/web/html/terms/html-paragraph-tag.html

  • IMAGE : Defines an image in your HTML document.

Few related attributes of the same are as follows :
src - source
alt
example of image element:
<img src='link to image'> Note: Image element has no end tag. To link an image to another document, simply nest the <img> tag inside <a> tags.

  • LINK : The <link> and <a> tag defines a link between a document and an external resource.

The <link> element appears in the <head> of a HTML document, and could have all the same attributes. The difference between a <link> and <a> is that a <a> may contain text and usually appears in a document, whereas the <link> element doesn't have content
Example:
<a href='link'>link name</a>

  • LIST: There are 2 types of lists. Ordered list and unordered list. For ordered list we use <ol> tag and for unordered we use <ul> tag.

Example:
<ol>
<li>list item</li>
</ol>

  • FORM:Form element in HTML can be framed in the following way

<form>
<input type="text" placeholder="Full Name" name="name">
<button>'Submit Button'</button>
</form>
type indicates the type of data
placeholder is the greyed-out text shown before the field is filled
name is an identifier for the input field

  • TABLE:Table in HTML can be framed in the following way

<table>
<th>table header</th>
<tr>table row</tr>
<td>table data</td>
</table>

First HTML Code

Use any text editor like notepad or sublime text to write the following code. Save your file with the extension .html .Open your file with the browser to see the output of your html code in the browser.

<!DOCTYPE HTML> #This line indicates use of HTML5
<html>
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        Hello, world!
    </body>
</html>

Important Links

https://www.w3schools.com/html/default.asp