Html Tutorial for Beginners
How to create website using HTML CSS?

It is very important to learn about HTML before you start to create website. HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to create website.

You must learn to implement CSS in your HTML elements before you start to create website because CSS is the language for describing the presentation of website, including colors, layout, and fonts. CSS is independent of HTML and can be used with any XML-based markup language. It mostly uses by all HTML programmers to create website.

HTML coding consists of different HTML elements and each element has its own function. Some common HTML elements are used by HTML programmer for creating heading of a webpage are H1, H2, H3, H4, H5, H6. These elements are priorities in the contents for using heading of different topic, menu and submenu, as HTML element H1 can be used to create a large heading of the main content. HTML element H2 is comparatively smaller than element H1, so that can be used to create a heading of less priority than H1 heading. Subsequently the H3, H4, H5, H6 are used for shorter and the shortest menu or heading according to the requirement of the webpage.

HTML element P is generally used for creating a paragraph or Para content in a webpage. To create a list of menu or submenu the HTML programmer used UL and LI elements. LI is a list of menu under the UL category. P, H1, H2, H3, H4, H5, H6 also can be used under the UL category to create a list of menu or heading in a webpage.

Image is always very attractive component to pull and hold the visitors and provide them best information without describing much word. An HTML element IMG is used to insert image files inside a webpage by the programmer. The coding is IMG with SRC and ALT where IMG signifies the image files and SRC is the location of the image files in the directory, ALT is the message to display if the image file is not found in the SRC location.

Hyperlink is one of the most important element use by the HTML developers to control the whole website by creating interlink among separate webpages in a project. Visitors can move from one webpage to another by just clicking a menu or object that is made to hyperlink with other document and in this way separate webpages in a website can be access by the users.

Label is an HTML element use to mark user Form and Input in also use to accept user input in a HTML Form. Both Label and Input are most essential elements to create a HTML Form in a website. Table, TD, TR is associated to create a structural arrangement of other elements in a HTML documents. Under Table menu TD and TR is use to arrange other HTML contents within separate elements to form a distinct structure in a webpage.

IFrame is use by the HTML programmer to access another media or web-link to work inside a webpage. This element gives full control of the web-link to play or work inside a web document, whereas Hyperlink release the control from the current documents and passes its access to other documents.

DIV is a container element; different HTML elements can be containing in a DIV elements. DIV are assign by the programmers within specific size and shape and also in responsive manner to get accustomed with separate media size. Separate other elements are arranged in a DIV container defines in a HTML document.

VIDEO and AUDIO are also two important HTML elements use to insert video and audio fie in a webpage. HTML developers also implement some control action in the Video and Audio elements to make it visitors friendly to play.

CSS is a style alignment of HTML elements, it is most important to use CSS in a HTML documents to make the webpage looks better. HTML programmer use CSS or style to all HTML elements to define its shape, size, design and looks in a webpage. A set of ordinary HTML elements looks quite gorgeous after implementation of CSS to it and the opposite is also true, all HTML elements will look unstructured without application of CSS style to it.

HTML programmers use different CSS style such as follow:-

Width: - To set the width of element.
Example: - Width:400px;

Height: - To set height of element.
Example: - Height:60%;

Margin: - To set margin of element.
Example: - Margin:4%;
Example: - Margin-top:20px;
Example: - Margin-bottom:100px;
Example: - Margin-right:80px;
Example: - Margin-left:10%;

Padding: - To set padding for the element.
Example: - Padding:4px;
Example: - Padding-top:20px;
Example: - Padding-bottom:100px;
Example: - Padding-right:80px;
Example: - Padding-left:10px;

Color: - To set color to an element.
Example: - Color:red;

Background-color: - To set a color of the element background.
Example: - Background-color:sky;

Background-image: - To set background image, provide image name with file extention and full save location.
Example: - Background-image:url("location/image.gif");

Background-size: - To set size of background image
Example: - Background-size:100% 100%;

Background-repeat: - To set the repeatability of background image
Example: - Background-repeat:no-repeat;

Border: - To set a border and border color of the element.
Example: - Border:2px solid black;

Border-radius: - To set border radius of the element.
Example: - Border-radius:6px 6px 4px 4px;

Box-shadow: To set a shadow and shadow color of the element.
Example: - Box-shadow:2px 2px 4px green;

Font-size: - To set font size of a text.
Example: - Font-size:24px;

Font-family: - To set separate font from external sources.
Example: - Font-family:myfont;

Font-style: - To set font style of a text.
Example: - Font-style:italic;

Text-shadow: - To set shadow and shadow color to text element.
Example: - Text-shadow:1px 1px 2px black;

Text-align: - To set the alignment of a text element.
Example: - Text-align:justify;

Text-decoration: - To set a define decoration to text element.
Example: - Text-decoration:none;

List-style: - To set style of a set of element included in a List, define Class or specific ID.
Example: - List-style:none;

Float: - To set the floating alignment of a set of elements.
Example: - Float:left;
Example: - Float:right;

Display: - To set element display either visible or invisible.
Example: - Display:block;
Example: - Display:none;

Opacity: - To set opacity or display unit of an element.
Example: - Opacity:0.4px;

Hover: - To set a change when the user put the mouse hovering on element.
Example: -
H1
{
color:red
}
H1:Hover
{
color:green
}

The above are some common CSS codes use by the programmers to set style of HTML elements but there are many other CSS codes to set style that you will learn with experience.

See Example Below

H2
{
Font-size:16px;
Line-height:24px;
Color:red;
Text-align:center;
Background-color:sky;
Padding:10px;
Margin-top:20px;
}
H2:Hover
{
Font-size:40px;
Line-height:60px;
Color:white;
Background-color:black;
}

Media Queries is a CSS3 module allowing content rendering to adapt any screen resolution to the shape and size of different devices. It is a cornerstone technology to create website for supporting in both small and large screen.

Bootstrap is a free and open-source front-end web framework to create websites. It contains HTML and CSS based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

JavaScript is a programming language commonly used to create website. It was developed to add dynamic and interactive implementation to websites. Like server-side scripting languages JavaScript code can be inserted anywhere within the HTML tag to create a website.

J-Query is a fast JavaScript library that can be used to simplify event handling, HTML document traversing, Ajax interactions and animation for speedy website development. J-Query simplifies the HTML's client-side scripting, thus simplifying Web 2.0 applications development. It uses by most programmers to create website.

PHP or hypertext preprocessor is defined as an HTML-embedded scripting language that is used to create website. An example of PHP is a script that displays the date and time in a website.

MySQL is an open source relational database management system based on Structured Query Language.

LAMP: - LAMP is a Web development platform

Linux as the operating system

Apache as the Web server

MySQL as the relational database management system

PHP as the object-oriented scripting language

The MySQL Extension is a relational database driver used in the PHP scripting language to provide an interface with MySQL databases.

Html Tutorial for Beginners
Introduction

• Introduction of the Subject Prescribed
• With HTML5 you can create your own Web site
• We will teaches you different elements of HTML
• Use Notepad, Notepad++ or other text Editor
• HTML5 is easy and interesting subject to learn
• It is browser supported programming language
• What is HTML?
• HTML is the standard markup language for creating Web pages
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the page
• All HTML documents must start with a document type declaration: <!DOCTYPE html>
• The HTML document itself begins with <html> and ends with </html>
• The visible part of the HTML document is between <body> and </body>
• Heading tag include the title inside of the website
• Heading tag coded inside <head></head>
• Title code give a title as <title>The Gyan</title> which display in the web bar
• Heading tag coded inside <head></head>
• HTML tags are element names surrounded by angle brackets:
• HTML tags normally come in pairs like <> and </>
• The first tag in a pair is the start tag, 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
• What is Web Browser and how does it work?
• The purpose of a web browser is to read HTML documents and display them
• The browser does not display the HTML tags, but uses them to determine how to display the document
• What is HTML Attributes?
• Attributes is added value to HTML property
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
• The language of the document can be declared in the <html> tag
• The language is declared with the lang attribute
• <html lang="en-US">

HTML Heading

• Html Tutorial for Beginners
  HTML CSS Tutorial for Beginners
  Here we will learn different HTML Elements and Attributes
• Headings are defined with the <h1> to <h6> tags
• <h1> defines the most important heading. <h6> defines the least important heading
• Browsers automatically add some white space or a margin before and after a heading
• <h1>First heading is largest by default</h1>
• <h2>Second heading is second largest</h2>
• <h3>Third heading is third largest</h3>
• <h4>Fourth heading is larger than fifth and sixth heading</h4>
• <h5>Fifth heading is larger than sixth heading</h5>
• <h6>Sixth heading is smallest by default</h6>


• TRY

Html Tutorial for Beginners
HTML Paragraph

• HTML CSS Tutorial for Beginners
  The HTML <p> element defines a paragraph
• Browsers automatically add some white space (a margin) before and after a paragraph.
• With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code
• The browser will remove any extra spaces and extra lines when the page is displayed
• The <br> tag is an empty tag, which means that it has no end tag
• <p>Hello this is Gyan tutorial point</p>
• <p>This is<br>Gyan tutorial Point<br>The most efficient tutorial.</p>
• The HTML <br> element defines a line break
• Use <br> if you want a line break (a new line) without starting a new paragraph


• TRY

Html Tutorial for Beginners
HTML Formatting

• HTML CSS Tutorial for Beginners
  HTML Formatting Elements
• HTML also defines special elements for defining text with a special meaning
• HTML uses elements like <b> and <i> for formatting output, like bold or italic text
• Formatting elements were designed to display special types of text:
• <b> Bold text
• <strong> Important text
• <i> Italic text
• <em> Emphasized text
• <mark> Marked text
• <small> Small text
• <del> Deleted text
• <ins> Inserted text
• <sub> Subscript text
• <sup> Superscript text
• The HTML <b> element defines bold text, without any extra importance
• <b>This text is bold</b>
• <strong>This text is strong</strong>
• <i>This text is italic</i>
• <em>This text is emphasized</em>
• <h2>HTML <small>Small</small> Formatting</h2>
• <h2>HTML <mark>Marked</mark> Formatting</h2>
• <p>My favorite color is <del>blue</del> red.</p>
• <p>My favorite <ins>color</ins> is red.</p>
• <p>This is _subscripted text.</p>
• <p>This is ^{superscripted} text</p>


• TRY

Html Tutorial for Beginners
HTML Hyperlink

• HTML CSS Tutorial for Beginners
  HTML Links Hyperlinks
• HTML links are hyperlinks
• You can click on a link and jump to another document
• When you move the mouse over a link, the mouse arrow will turn into a little hand
• In HTML, links are defined with the <a> tag:
• <a href="url">link text</a>
• <a href="http://website.gyaann.com/">Visit our HTML tutorial</a>
• The href attribute specifies the destination address (http://website.gyaann.com/) of the link
• The link text is the visible part (Visit our HTML tutorial)
• Clicking on the link text will send you to the specified address
• Note: Without a forward slash on subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the address, and then create a new request
• A local link (link to the same web site) is specified with a relative URL (without http://www....).
• Example <a href="html_images.asp">HTML Images</a>


• TRY

Html Tutorial for Beginners
HTML Image

• HTML CSS Tutorial for Beginners
  In HTML, images are defined with the <img> tag
• The <img> tag is empty, it contains attributes only, and does not have a closing tag
• The src attribute specifies the URL (web address) of the image:
• <img src="url" alt="some_text" style="width:width;height:height;">
• <img src="img.url" alt="HTML5 Icon" style="width:128px;height:128px;">
• The alt attribute provides an alternate text for an image, if the 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)
• If a browser cannot find an image, it will display the value of the alt attribute:
• The alt attribute is required. A web page will not validate correctly without it.
• Alternatively, you can use the width and height attributes. Here, the values are specified in pixels by default:
• <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
• Note: Always specify the width and height of an image. If width and height are not specified, the page will flicker while the image loads
• If not specified, the browser expects to find the image in the same folder as the web page
• However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
• Some web sites store their images on image servers
• Actually, you can access images from any web address in the world:
• <img src="http://website.gyaann.com/a2.jpg" alt="http://website.gyaann.com/">


• TRY

Html Tutorial for Beginners
HTML Table

• HTML CSS Tutorial for Beginners
  An HTML table is defined with the <table> tag
• Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
• Note: The <td> elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc
• If you do not specify a border for the table, it will be displayed without borders
• A border is set using the CSS border property:
• If you want the borders to collapse into one border, add the CSS border-collapse property:
• Cell padding specifies the space between the cell content and its borders
• If you do not specify a padding, the table cells will be displayed without padding
• To set the padding, use the CSS padding property:
• By default, table headings are bold and centered
• To left-align the table headings, use the CSS text-align property:
• All CSS property will be discussed later in Cascading Style Sheets chapter


• TRY

Html Tutorial for Beginners
HTML List

• HTML CSS Tutorial for Beginners
  Unordered HTML List
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag
• The list items will be marked with bullets (small black circles) by default:
• Unordered HTML List - Choose List Item Marker
• The CSS list-style-type property is used to define the style of the list item marker:
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag
• The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
• Note: List items can contain new list, and other HTML elements, like images and links, etc
• HTML lists can be styled in many different ways with CSS


• TRY

Html Tutorial for Beginners
HTML Element

• HTML CSS Tutorial for Beginners
  HTML Block and Inline Elements
• Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline
• Block-level Elements
• A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)
• Examples of block-level elements:
• <div>
• <h1> to <h6>
• <p>


• TRY

Html Tutorial for Beginners
HTML Inline

• HTML CSS Tutorial for Beginners
  Inline Elements
• An inline element does not start on a new line and only takes up as much width as necessary
• Examples of inline elements:
• <span>
• <a>
• <img>
• The <div> element is often used as a container for other HTML elements
• The <div> element has no required attributes, but both style and class are common
• When used together with CSS the <div> element can be used to style blocks of content:


• TRY

HTML for Beginners the Easy Way
HTML Iframe

• HTML CSS Tutorial for Beginners
  Iframe is an HTML tool which is define with the <iframe> tag:
• <iframe src="URL"></iframe>
• The src attribute specifies the URL (web address) of the inline frame page
• Use the height and width attributes to specify the size of the iframe
• The attribute values are specified in pixels by default, but they can also be in percent (like "80%")
• <iframe src="demo_iframe.htm" height="200" width="300"></iframe>
• By default, an iframe has a border around it
• To remove the border, add the style attribute and use the CSS border property:
• <iframe src="demo_iframe.htm" style="border:none;"></iframe>
• <iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
• An iframe can be used as the target frame for a link
• The target attribute of the link must refer to the name attribute of the iframe:
• <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
• <p><a href="url" target="iframe_a">Gyan</a></p>


• TRY

HTML for Beginners the Easy Way
HTML Video

• HTML CSS Tutorial for Beginners
  How to play video in HTML?
• Before HTML5, a video could only be played in a browser with a plug-in (like flash)
• The HTML5 <video> element specifies a standard way to embed a video in a web page
• How does it work?
• The controls attribute adds video controlers, like play, pause, and volume
• It may include width and height attributes.If height and width are not set, the page might flicker while the video loads
• If height and width are not set then the page might go out of screen during loadings
• The <source> element allows you to specify alternative video files which the browser may choose from it.
• The browser will automatically play the first recognized format
• The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element
• To show a video in HTML, use the <video> element
• We define a specific width and height
• File type is given which is supportive in browser
• <video width="320" height="240" controls>
• <source src="movie.mp4" type="video/mp4">
• <source src="movie.ogg" type="video/ogg">
• Your browser does not support the video tag
• </video>
• HTML <video> Autoplay
• How to start a video automatically use the autoplay attribute?
• <video width="320" height="240" autoplay>
• <source src="url" type="video/mp4">
• <source src="url" type="video/ogg">
• Your browser does not support the video tag.
• </video>
• The autoplay attribute does not work in mobile devices like iPad and iPhone:
• In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg
• The browser support for the different formats is:
• Browser
• MP4
• WebM
• Ogg
• Internet Explorer
• YES
• NO
• No
• Crome
• YES
• YES
• YES
• Fire Fox
• YES
• YES
• YES
• Safari
• YES
• NO
• NO
• Opera
• YES (from Opera 25)
• YES
• YES



HTML for Beginners the Easy Way
HTML Video - Media Types



• File Format
• Media Type
• MP4
• Video/mp4
• WebM
• Video/webm
• Ogg
• Video/ogg


• TRY

HTML for Beginners the Easy Way
HTML Audio

• HTML CSS Tutorial for Beginners
  Audio on the Web
• Before HTML5, audio files could only be played in a browser with a plug-in (like flash)
• The HTML5 <audio> element specifies a standard way to embed audio in a web page
• The HTML <audio> Element
• To play an audio file in HTML, use the <audio> element:
• <audio controls>
• <source src="horse.ogg" type="audio/ogg">
• <source src="horse.mp3" type="audio/mpeg">
• Your browser does not support the audio element
• </audio>
• HTML Audio - How It Works
• The controls attribute adds audio controls, like play, pause, and volume
• The <source> element allows you to specify alternative audio files which the browser may choose from
• The browser will use the first recognized format
• The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element
• HTML Audio - Browser Support
• In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg
• Browser
• MP3
• Wav
• Ogg
• Internet Explorer
• YES
• NO
• No
• Crome
• YES
• YES
• YES
• Fire Fox
• YES
• YES
• YES
• Safari
• YES
• YES
• NO
• Opera
• YES
• YES
• YES



HTML for Beginners the Easy Way
HTML Audio - Media Types



• File Format
• Media Type
• MP3
• Audio/mpeg
• Wav
• Audio/wav
• Ogg
• Audio/ogg


• TRY

HTML for Beginners the Easy Way
HTML YouTube

• HTML CSS Tutorial for Beginners
  HTML YouTube Videos
• We can easily play the YouTube video in our project
• We need to learn the implementation of YouTube video to get rid of supporting video format
• Use the height and width attributes to specify the size of the iframe
• We have seen that we have to convert your videos to different formats to make them play in all browsers
• Converting videos to different formats can be difficult and time-consuming
• An easier solution is to let YouTube play the videos in your web page
• What is YouTube Video Id
• YouTube will display an id (like sFfaYc_pIx8), when you play a video
• You can use this id, and refer to your video in the HTML code
• How to play a YouTube Video in HTML
• To play your video on a web page, do the following:
• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Add any other parameters to the URL (see below)
• <iframe width="400" height="320"src="https://www.youtube.com/embed/ynwPueh6Fp8">
• </iframe>
• In the search first we have to include https://www.youtube.com/embed/ then add the specific unique Id of the video
• We also can include other video from youtube without uploading our personal video
• YouTube Autoplay
• You can have your video start playing automatically when a user visits that page by adding a simple parameter to your YouTube URL
• Note: Take careful consideration when deciding to autoplay your videos. Automatically starting a video can annoy your visitor and end up degrading the sentimental value.
• Specify the value 0 in autoplay (default): The video will not play automatically when the player loads
• Specify the value 1 in autoplay: The video will play automatically when the player loads.
• <iframe width="400" height="320"src="https://www.youtube.com/embed/TCORvWFYyXY">
• </iframe>
• YouTube Loop
• Specify the value 0 in the loop (default): The video will play only once
• Specify the value 1 in the loop: The video will loop (forever)
• <iframe width="400" height="320"src="https://www.youtube.com/embed/m_p8cHnWbkk">
• </iframe>
• YouTube Controls
• Specify the value 0 in the controls: Player controls does not display
• Specify the value 1 (default) in the controls: Player controls display
• <iframe width="400" height="320"src="https://www.youtube.com/embed/bXFVew0VS_8">
• </iframe>


• TRY

HTML for Beginners the Easy Way
HTML ID & HTML Class

• HTML CSS Tutorial for Beginners
  The id attribute specifies a unique identity for an HTML element which must be within the HTML document
• The id attribute is mostly used to point a style in a style sheet
• JavaScript using the HTML document to manipulate the element with the specific id
• Use the id attribute to manipulate text with JavaScript
• <h1 id="myHeader">Hello World!</h1>
• <button onclick="displayResult()">Change text
• <script>
• function displayResult() {
• document.getElementById("myHeader").innerHTML = "Have a nice day!";}
• </script>
• HTML Class
• The HTML class attribute makes it possible to define equal styles for elements with the same class name
• Here we have three <heading> elements that points to the same class name
• <html>
• <head>
• <style>
• .heading-class
• {
• color:red;
• font-size:16px;
• background-color:green;
• }
• </style>
• </head>
• <body>
• <h1 class="heading-class">India</h1>
• <h2 class="heading-class">West Bengal</h2>
• <h3 class="heading-class">Kolkata</h3>
• <h4 class="heading-class">Hugli</h4>
• <h5 class="heading-class">Konnagar</h5>
• <h6 class="heading-class">Bastand</h6>
• </body>
• </html>