Creating webpage with HTML

C.HTML stands for Hyper Text Markup Language.Creating webpage with html is easy.It defines the meaning and structure of web content.Web contents include texts,lists,medias etc.Mainly We use html for creating a webpage.HTML, CSS and JavaScript are the important web technologies.

Here you can see how to use Dreamweaver for html.Once you installed wampserver,It allows you to create web applications with Apache2, PHP and a MySQL database.

The index page is the URL or local file that automatically loads when a web browser starts and when the browser’s ‘home’ button is pressed. Create a folder named test on C:\wamp\www\test

1.Open Macromedia Dreamweaver. Develop your site with index.php

4

2.index.php

3.Run WampServer with its icon

Select your page from localhost/test/index.php.Browser will display your first web page.

HTML EXAMPLE WITH ALL ELEMENTS IN SINGLE PAGE
Download

Html(HyperTextMarkupLanguage)

It is very easy to learn HTML.HTML contains Tags and Attributes to create the webpage structure(heading,paragraphs etc).Basis of web designing starts from html.The latest version of html is HTML5.

HTML Editors

  • VS Code
  • Brackets 
  • Notepad++
  • Dreamweaver
  • Atom

Steps for creating a webpage with Html

  1. Open code editor.
  2. Create the doctype of webpage. <!doctype html>
  3. Create Parent html tag: <html> </html>
  4. Create head tag inside html tag:<head> </head>
  5. Create body tag after head tag closing, e.g. <body> </body>
  6. Add title tag inside head, e.g. <title> </title>
  7. Add contents(paragraphs,images etc) after head tag closing inside<body></body>
  8. Save page as index.html file on your system.
  9. Double Click the file and your webpage is view on browser.

Html Elements

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash.An element in HTML usually consist of a start tag , close tag </tag name> and content inserted between them.

Tag

Description

<html>

Root tag of a webpage

<head>

First child of <html>.Used to write info for webbrowsers

<title>

It is used inside <head>.Title is displayed as webpage title in the browser.

<meta>

It is used to description,keywords,charset of a website.

<body>

<body> contains the content of a webpage such as heading ,paragraphs etc

Example

<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first Heading</h1>
<h2> This is my second Heading</h2>
<p>This is my Paragraph</p>
</body>
</html>

html elements

ELEMENTS

Start Tag

Content

End Tag

Heading

<h1><h2><h3><h4><h5><h6>

Heading Content

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

Paragraph

<p>

Paragraph Content

</p>

Center

<center>

Center Content

</content>

Division

<div>

Division Content

</div>

Horizontal Line

<hr/>

Line Break

<br/>

Attributes

HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.Each element or tag can have attributes, which defines the behaviour of that element.

  • Attributes should always be applied with start tag OR The Attribute should always be applied with its name and value pair.
  • The Attributes name and values are case sensitive, and  it should be written in Lowercase only.
  • You can add multiple attributes in one HTML element, but need to give space between two attributes.

Syntax

<element attribute_name=“value”>content</element> 

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body >

<p style=”height: 100px; “>It will change height </p>
<p style=”color: red”>It will change the color of content</p>
</body>
</html>

html attributes

ATTRIBUTES

USE

EXAMPLE

Id

Uniquely Identify an Element

<p id="para1">Content</p>

Title

Gives title for an element

<h1 title="hello">content</h1>

Class

Associate element with stylesheet

<h1 class="class1">content</h1>

Style

Specify CSS rules for an element

<p style="color:white">content</p>


href

hyperlink

<a href="home.html">home link</a>

src

src is the required attribute of <img>.which specifies source of the image.

<img src="flower.jpg" height="100px" width="100px"/>

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

ezywebbuilding will use the information you provide on this form to be in touch with you and to provide updates and marketing.