Learn HTML Basics

-


HTML Basics...

HTML stands for Hyper Text Markup Language.
HTML is not a programming language.You don't need any previous programming experience.
Using this language you can start web designing.

What is Hyper Text Markup Language..??

  • Hypertext is a text that is capable of moving from one document to another. This can be done by     clicking on the hypertext.
  • Markup means that specific portions of a document are marked up to indicate how they should be       displayed in the browser. Markup is parts of the document that are used to describe how it should be   displayed in a web browser.

HTML Tags:-

Tags indicate structure in an HTML document and a way of hierarchically arranging content.
HTML tags are keywords surrounded by angle brackets like <html>.
HTML tags normally come in pairs like <p> and </p>.
HTML tags are not case sensitive.

Basic HTML tags:-

Document Structure..

<!DOCTYPE html>      : To Indicate the web Page is html 5.
<HTML> </HTML>     : Start and end of HTML document.
<TITLE> </TITLE>     : To add the tile to the Web Page.
<HEAD> </HEAD>     : Document meta-information start and end.
<BODY> </BODY>     : Content of document displayed by the browser


<!DOCTYPE html>
 <html> 
<head>
 <title>Page Title</title>
 </head>
 <body> Page Body </body> 
</html>

This is basic HTML program Structure.

Now we consider about Some HTML Writing Methods.
Header tags use to defines headers. Use different type headers <h1>  to <h6>.  <h1> is largest header <h6> is  smallest header.
Paragraphs tags <p> use to define paragraphs.
Break <br/> tag use to insert single line break and <hr/> tag use to Creates a horizontal line in the HTML page.


<!DOCTYPE html> 
<html> 
 <body> 
  <h1>This is Heading 1 </h1> <br/> 
  <p>The hr tag defines a horizontal rule:</p> 
  <hr />
   <p>This is a paragraph</p> 
  <hr /> 
 </body>
</html>

Text formatting tags are also important tag for web design.

<B> </B>  : Defines bold text.
<I> </I>   : Defines italic text.
<TT> </TT>  : Defines Teletype italic text.
<U> </U>  : Defines underline text.
<SUB> </SUB>  : Defines sub scripted text.
<SUP> </SUP>  : Defines super scripted text.
<SMALL> </SMALL>  : Defines small text.
<DEL> </DEL>  : Defines inserted text.
<INS> </INS>   : Defines deleted text.

These are the same of basic formatting tags.

Listing is another impotent thing in HTML.
HTML supports ordered, unordered and definition lists.

An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

You can understand how to apply list in this examples.

Unordered List:-

<!DOCTYPE HTML> 
<html> 
 <head> 
 <title>Unordered Lists </title> 
 </head> 
 <body> 
  <UL TYPE="square">
    <LI> One </LI> <LI> Two </LI>
  <UL TYPE="circle">
   <LI> Three </LI> <LI> Four </LI> 
  <UL TYPE="square"> 
   <LI> Five </LI> <LI> Six </LI>
  </UL> </UL> </UL>
 </body>
</html>

Ordered List:-



<!DOCTYPE HTML>
 <html>
  <head>
   <title>Ordered Lists Page</title> 
 </head>
 <body> 
  <OL TYPE="A"> 
   <LI> Item one </LI> <LI> Item two </LI> 
  <OL TYPE="a" > 
   <LI> Sublist item one </LI> <LI> Sublist item two </LI> 
  <OL TYPE="1"> 
   <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI>
 </OL> </OL> </OL> 
</body> 
</html>

Hyperlinks in HTML

<a> tag use to define Hyperlinks.

You can understand it in this example.
 <a href="http://www.abc.com/">Visit SLIIT!</a>


Adding Image,Video and Audio to web page.

You can add Image using this tag

<img src="<!--Path to the image file-->" width="42" height="42">

You can add video using this tag

<video width="320" height="240" controls>
 <source src="<!--Path to the video file-->" type="video/mp4"> Test   Video
</video>

You can add Audio using this tag

<audio controls>
  <source src="<!--Path to the audio file--> "> 
    Sample Audio
</audio>

These are some basic things in HTML. I hope this blog helpful to you .
See you in next blog

Thanks you.





 
























Comments

Post a Comment

Popular posts from this blog

MERN App

-
rest api react node mongo express front end App.js import React from 'react' ; import "bootstrap/dist/css/bootstrap.min.css" import {BrowserRouter as Router , Route , Link} from "react-router-dom" ; import './App.css' ; import ViewCourse from "./Component/viewCourse" ; import EditCourse from "./Component/editCourse" ; import AddCourse from "./Component/addCourse" ; import DeleteCourse from "./Component/deleteCourse" ; class App extends React.Component{ render () { return ( <div style = {{ background : 'grey' , height : '752px' , position : 'relative' }} > <Router> <div className ="App" ><br/> <h1> Online Course </h1> <Link to ="/" > Courses </Link> <Link to ="/create" > Add Course ...
Read more

Node Introduction

-
What is NodeJS..??    Node is open source server environment.. it runs various platforms likes windows, unix, mac os etc. node uses js on the server.  node can generate dynamic page content. can create, open,read,write,delete, and close files on the server and can modify data in your database. Setup Node js.. first you need to download and install node js  https://nodejs.org/   then check your node version using node -v type in cmd then you need to connect to port. for that you need to install express using npm install express --save   after that you need to import react react-DOM express libraries then you need to write following code to connect to port. your connection is successful print the message. app.listen(3000, (err) =>{   if(err){      console.error(err);      return;       }    console.log("Listen port 3000"); }); Before this you need to add details about project...
Read more

React installation

-
Image
Welcome to my next blog.       in this blog i'm share with some coding example of react. How to start react project:- you need to use IDE to start using. you can simply use VS code for coding. and also have some paid development tools like webstom. Some university's provide free license for this IDE. After that first you need to create project.To start project you need to write like this.    open the cmd in your  project folder location   then you need to write     npx create-react-app <app name>   then need to go app folder using cd <app name> next you can start react project using npm start key word if you haven't install react-dom need to install it    npm install react-dom --save then you need to install webpacks using these codes   npm install webpack webpack-dev-server webpack-cli --save If you working with html files you need to install babel packages   ...
Read more