How To Create A Simple HTML Document?: Lesson#1

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 12

Lesson#1

HTML  (Hypertext Mark-up Language)

HTML is the standard mark-up language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn, don’t need to have back end programming skills.

This is front end Programming Language

Sites created using front end development don’t need to interact with the
information store in the database in order to be functional.

Languages like CSS , JavaScript are other examples like HTML and are at the
heart of front end Development.

These above 3 languages are relatively easy to learn and offer plenty of
flexibility and creativity.

 HTML consists of a series of elements


 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.

Where to write a HTML code?

You will write the HTML document on the word processor, or Notepad, WordPad, or Simple


Text. When you are finished creating the HTML document, you'll then open the document in
a browser, like Netscape Navigator. The browser will interpret the HTML commands for you
and display the Web page.

How to create a Simple HTML Document?


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

<h1>My First Heading</h1>


<p>My first paragraph.</p>
</body>
</html>

Explanation of the above Code:

 The <!DOCTYPE html> declaration defines that this document is an HTML5


document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

Examples of Heading and Paragraph

<h1>My First Heading</h1>


<p>My first paragraph.</p>

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>


The HTML element is everything from the start tag to the end tag:

Note: Some HTML elements have no content (like the <br> element).


These elements are called empty elements. Empty elements do not
have an end tag!

<br> tag is one of the element of HTML which doesn’t has any
content, because it is used for line break. It is useful in the poem and
stories where the division of the line is significant.
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how
to display the document:

Learn HTML Using Notepad or TextEdit


Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad
(PC) or TextEdit (Mac).

We believe in that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or
TextEdit.

Step 1: Open Notepad (PC)


Step 3: Save the HTML Page

Note:You can use either .htm or .html as file extension. There is no


difference, it is up to you.

Task #1: Open a Notepad /word processor or Word pad and type a
code in HTML which will display 3 headings of different sizes like you
can include h1, h2 and h3 and the heading message should be
displayed “This is Heading1”, “This is Heading2”,” This is Heading 3”

Task#2: Following the Task#1, You have to include a paragraph in


first two heading :

Heading 1: using the <p> tag

This is my first paragraph about the HTML scripting Language, which is front
end programming language like CSS and JavaScript. It is one of the most
popular language which is used in web development to create web pages.
Heading2: the same <p> will be used under the Heading2

Task#3: Change the Title of the Webpage with “Hewens College”


using <tittle> tag
Lesson #2( HTML)

HTML Links
HTML links are defined with the <a> tag:

<head >

<\head>

<a>

<\a>

<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute. 

Lesson #3( HTML)

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as


attributes:

<img src="" alt="HTML Image file " width="104" height="142">

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as


attributes:

We can use Marquee tag for moving our image

<marquee>
<\marquee>

Note: The marquee tag is used for moving the things on a web page.

The <center> tag in HTML is used to set the alignment of text into the center. 

Lesson#3
What is an Article and how does it looks like?

HTML Article Tag


The HTML <article> tag defines an independent self-contained content in a
document, page, application or a site.

The article tag content makes sense on its own. It is independent and complete from
other content shown on the page. This tag is generally used on Forum post, Blog
post, News story, comment etc.
NOTE: Heading tag and Paragraph tag can be used inside the <Article> tag

What are the Potential sources for Article tag?


The potential sources for an Article tags are :

1.Blog posts

2.Forum Posts

3.News stories

What is CSS and what is use for?

CSS stands for cascading style sheet

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the
core technologies for building Web pages. HTML provides the structure of the page, CSS
the (visual and aural) layout, for a variety of devices.

CSS is the language for describing the presentation of Web pages, including colors, layout,
and fonts.

Task#1: create 3 articles (independent self-contained content) about different


browsers, in which first Article will contain the heading (Google Chrome) and
information about this Browser. The second heading will be (Firefox Mozilla) and
display an information about the browser and The third heading should be (Internet
Explorer) with the information about this browser.

An output should look like this:

Important: you can change the content inside each of these browser’s heading if you
want

Note: The <article> element does not render as anything special in a


browser. However, you can use CSS to style the <article> element (see
example below).

In the next Lesson:

Task#2: What is CSS and how can it be used to give a style to <article> tag.
The above screenshot is an example of expected output, for which you have to write
a code using HTML and some CSS to style your <article> tag

Task#1: Copy the below script on the Notepad , save your work with an
extension .htm or .html and then open in a Browser
<article>  
1.  <h2>Narendra Modi</h2>  
2.   <i>(Naam to suna hi hoga) </i>  
3.   <p>Narendra DamodarDas Modi is the 15th and current Prime Minister of I
ndia,    
4.   Modi, a leader of the Bharatiya Janata Party (BJP), previously served as the 
Chief Minister  
5.   of Gujarat state from 2001 to 2014. He is currently the Member of Parliame
nt (MP) from Varanasi. </p>  
6. </article>  
7. Task#2: Create a web page to add 2 link that will direct to 2 different
web sites and also add 2 images and add a tag that can move that image
from left to right

HTML Table
HTML table tag is used to display data in tabular form (row * column). There can
be many columns in a row.

We can create a table to display data in tabular form, using <table> element, with
the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>,
and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to use div
tag over table to manage the layout of the page .

<!DOCTYPE html>

<html>
<head>
<title> This is my First table in HTML </title>
<style>
table ,th , td{
Border: 1px , solid black;
}
</style>
</head>

<body>
<h1>The table element</h1>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

</body>
</html>

Note : if you want to display a table around the table heading and table data you
have created then we need to use a tag <style> tag of CSS inside the <head> tag

Task #3:

Create a table which contains 4 fields about student object( St_ID, St_Name , St_Address and
St_year_Group , Each of this field should contain the data user input from the Keyboard.

The sample table is given below :

St_ID St_Name St_Address St_year_Group

001
002

003

You might also like