Scribd
Upload
19 views9 pages

7 - ICT - Refrence Material

Uploaded by

chitrakshag12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views9 pages

7 - ICT - Refrence Material

Uploaded by

chitrakshag12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

DPSGS/24-25/7/ICT/UI 1

Name: _______________________________________
Grade: ___________________Section: ____________
School: _________________________________________

“WEB DESIGNING WITH HTML”


ICT UI 1
GRADE-7

____________________________________________________________________________________
INTRODUCTION:
HTML (or Hypertext Markup Language) is a programming language used to create web pages.
HTML is a relatively easy programming language to learn, which makes it a great place for kids to start
with coding in general or as another language to add to their repertoire. There’s no fixed number of how
many HTML tags exist. Based on the web development program being used, however, that number
usually lies between 80 and 150.
HTML Documents = Web Pages

STRUCTURE OF HTML:

Note: HTML is not case sensitive. <Title> is equivalent to <TITLE> or <Title>.If you want to prepare
yourself for the next generations of HTML you should start lowercase tags.

TAGS IN HTML
HTML markup tags are usually called HTML tags

 HTML tags are keywords surrounded by angle brackets like <html>


 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
The BODY section holds most of the actual coding seen or used on the web page. The BODY tag
itself has properties and values that determine how the page is going to be viewed.

BGCOLOR Background COLOR.


TEXT TEXT color.

By default, most browsers will show a white background with black text.

HEADING TAGS
There are 6 sizes to the header tag. 1 being the largest, 6 being the smallest. This example shows the
different sizes that can be created:

PARAGRAPH TAGS

<p> Tag: The <p> tag defines a paragraph.


Browsers automatically add a single blank line before and after each <p> element.

HTML FORMATTING TAGS


Formatting elements were designed to display special types of text: The most used
formatting tags are very simple:
Bold
The <B> element indicates that all characters between the staring <B> and the ending </B>
tagwill appear in BOLD.
Italics
The <I> element indicates that all characters between the starting <I> and the ending </I>
tag will appear in Italics.
Underline
The <U> element indicates that all characters between the staring <U> and the ending </U>
tagwill appear in underline.
Typewriter Text
The <TT> element indicates that all characters between the staring <TT> and the ending </TT>
tag will appear in typewriter style font or in teletype font.
Strikeout
The <STRIKE> element indicates that all characters between the staring <STRIKE> and ending
</STRIKE> tag will appear strikeout i.e. with a line through them.
Few More formatting Text:

 <strong> - Important text


 <em> - Emphasized text
 <sub> - Subscript text
 <sup> - Superscript text

Now that the text is in place, you can add some formatting tags. These tags allow you to
showyour text in different ways.

HORIZONTAL RULER AND LINE BREAK


This is used to draw a horizontal line across the page. The horizontal rule is a pretty useful effect.
Horizontal

This is a quick, nearly painless way of throwing in a section divider.HR tag has various
LINE BREAK : The HTML <br> tag defines a line break. Unlike the <p> tag defining a paragraph,
an empty indent is not added before the line.
The <br> tag is used to enter line breaks. It is useful for writing addresses, poems or song lyrics.

USING FONT TAG


The FONT tag is another text formatting feature. It allows you to adjust the size and
color ofyour text.The properties of a FONT tag are:
A number 1 to 7 for height and thickness. Using a + or a - before the number will
SIZE adjust the size against the default.
COLOR A hex number set for color or Color name.
FACE Use to change the font type.
Normal text size is 3.
<font color="red"size=”5”face="arial">
This text is red and size 5.
</font>

USING IMAGE TAG :

Image Tag has the below 2 important attribute:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

<img src="filename.gif" alt="text">


 IMG stands for “image”. It announces to the browser that an
image will go here on the page.
 SRC stands for “source”. This attribute tells the browser where to go to
find the image.
Image.gif is the name of the image.
Please Note: To Find the location of the image. Right click on the image --> Select properties --> copy
the file location --> paste the location in the image tag then put the \ write the file name.file type.

<HTML>

<HEAD>

<TITLE>SAMPLE CODE</TITLE>

</HEAD>
<BODY BGCOLOR=”YELLOW”TEXT=”BLUE”>

<H1 ALIGN=”CENTER”> MY PAGE </H1>

<HR SIZE=”10”WIDTH=”200”COLOR=”RED”ALIGN=”RED”>

<P><B>THIS IS MY FIRST PAGE</B>, I AM FOND OF HTML</P>

<BR>

<BR>

<FONT COLOR=”GREEN”SIZE=”5”FACE="arial>

<I>I love ICT Session, I am so excited to learn <STRONG>HTML</STRONG>, I will make my portfolio using
HTML</I>

</FONT>

<IMGSRC=”LOCATION\PICTURENAME.TYPE”WIDTH=”200”HEIGTH=”100”ALIGN=”RIGHT”ALT=”C
AN’T DISPLAY THE PICTURE”>

</HTML>
LINKING IN HTML
HTML Links are connections from one web resource to another. A link has two ends, An anchor and a
direction.

The link starts at the “source” anchor and points to the “destination” anchor, Anchor tags have an href attribute
specifying the destination URL. Links can lead to external sites or different sections within the same page,
enhancing website interactivity.

Note: A hyperlink can be represented by an image or any other HTML element, not just text.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Syntax:<a href="url">link text</a>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>Click on the following link</p>
<a href="https://https://sms.dpsgs.org/">School SMS</a>
</body>
</html>

LIST IN HTML
An HTML list is a record of related information used to display the data or any information on web pages in
the ordered or unordered form.

HTML Ordered Lists


HTML Ordered List is created by the HTML <ol> tag, to displays elements in an ordered form, either
numerical or alphabetical. Within the <ol> tag, list items <li> are used to define the items in sequential order.

<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>

Ordered List Type Attribute with value:

The type attribute of <ol> tag specifies the order we want to create.

Type Descriptions

type=”1″ This will list the items with numbers (default)

type=”A” This will list the items in uppercase letters.

type=”a” This will list the items in lowercase letters.

type=”I” This will list the items with uppercase Roman numbers.

type=”i” This will list the items with lowercase Roman numbers.
<html>
<head>
<title>
Uppercase Letters Ordered List
</title>
</head>
<body>
<h2>Uppercase Letters Ordered List</h2>
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
</ol>
</body></html>

HTML Unordered Lists:


HTML Unordered List displays the elements in a bulleted format, which can be defined as an
unordered list item using the <ul> tag. It contains the list items <li> element. The <ul> tag requires an
opening and closing tag.

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Unordered Lists Style Types:

Values Descriptions

disc This value sets the list marker to a bullet (default).

circle This value sets the list marker to a circle.

square This value sets the list marker to a square.

none This value unmarks the list of items.

<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
</ul>

TABLES IN HTML
An HTML Table is an arrangement of data in rows and columns in tabular format. Tables are
useful for various tasks, such as presenting text information and numerical data. A table is a useful
tool for quickly and easily finding connections between different types of data. Tables are also used
to create databases.

Defining Tables in HTML


Table Headers:</th> Content...</th>
Table Rows:</tr> Content...</tr>
Table Cells : </td> Content...</td>

TABLE ATTRIBUTES
Attributes and tags Illustrations

Define Table <table>..</table>

Table row <tr>..</tr>

Table header <th>..</th>

Table Data in a cell <td>..</td>

Cell spacing
(Cell spacing is the space between each cell. <table cellspacing="">...</table>
By default the space is set to 2 pixels.)
Cell padding
(gap between borders and data in the table, this gap <table cellpadding="">...</table>
is known as cell padding.)

Table border <table border="">...</table>

Alignment <table align=center/left/right>...</table>

Cell color <table bgcolor="#$$$$$$">...</table>

Height / Width <table height=”5”width=”5”>

<html>
<body>
<table border="2"width="5"heigth="5"align="right"bgcolor="yellow">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table></body>
</html>
Individual Assignment

Challenge yourself to design a webpage about your dream summer vacation!

Requirements:

 Topic: Design a webpage showcasing your dream summer vacation.


 Content:
o Use an <h1> tag for the title "My Dream Summer Vacation"
o Include a short paragraph describing your dream destination and why you would like to
visit.
o Create a bulleted list (<ul>) of activities you would do on this vacation. Be creative!
o Design a table (<table>) with three columns: "Places to Visit", "Things to Do", and
"Things to Eat". Fill the table with details relevant to your dream vacation.
o Include at least two internal links within your webpage.
 Link the destination name in the paragraph to another webpage you create
describing the location in more detail (e.g., "The Great Barrier Reef").
 You can also link interesting activities or foods in the list or table to relevant
websites (e.g., "Learn to Surf" could link to a surfing instruction website).

Tips:

 You can use a simple text editor like Notepad .


 Once you've written your HTML code, save it with a .html extension (e.g.,
"dreamvacation.html"). You can then open the file in a web browser to see your webpage come
to life!
 Upload your webpage screenshot on your respective class ICT channel in the folder

UI1 Individual Activity. Your file name should be like this : [yourname]_UI1_HTML

 Have fun and unleash your creativity!

You might also like