Scribd
Upload
3 views

WEB[1]

This document provides an introduction to HTML, covering its structure, essential elements, and common tags used in web development. It also discusses CSS, including its purpose, types, and attributes for styling HTML elements. Additionally, the document touches on forms, tables, and frames, along with a pop quiz to test understanding of the concepts presented.

Uploaded by

kevostein2k47
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
3 views

WEB[1]

This document provides an introduction to HTML, covering its structure, essential elements, and common tags used in web development. It also discusses CSS, including its purpose, types, and attributes for styling HTML elements. Additionally, the document touches on forms, tables, and frames, along with a pop quiz to test understanding of the concepts presented.

Uploaded by

kevostein2k47
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/ 29

Web - Basic Concepts

HTML-Introduction
HTML is the backbone of the World Wide Web, providing the structure
for web pages.
In this lesson, we will explore the fundamentals of HTML, learn how to
create a basic HTML document, and understand the essential elements
that make up a web page.
Structure:
• HTML uses a tag-based structure to define elements on a web page.
• Tags are enclosed in angle brackets, such as <tag>.
Tag is a command that tells the web browser how to display the text, audio, graphics or
video on a web page.
e.g.
<html>
<head> Heading goes here…</head>
<title> Title goes here…</title>
<body> Body goes here…</body>
</html>
Key Points:

• Tags are indicated with pair of angle brackets.


• They start with a less than (<) character and end with a greater than
(>) character.
• The tag name is specified between the angle brackets.
• Most of the tags usually occur in pair: the start tag and the closing tag.
• The start tag is simply the tag name is enclosed in angle bracket
whereas the closing tag is specified including a forward slash (/).
Key Points:

• Some tags are the empty i.e. they don’t have the closing tag.
• Tags are not case sensitive.
• The starting and closing tag name must be the same. For example <b>
hello </i> is invalid as both are different.
• If you don’t specify the angle brackets (<>) for a tag, the browser will
treat the tag name as a simple text.
• The tag can also have attributes to provide additional information
about the tag to the browser.
II. Basic HTML Document Structure:
a. Document Type Declaration (DOCTYPE):
• Specifies the HTML version being used.
• Example: <!DOCTYPE html> for HTML5.
b. HTML Element:
• The root element that wraps all content on the page.
• Opening tag: <html>
• Closing tag: </html>
II. Basic HTML Document Structure:
c. Head Element:
• Contains meta-information about the HTML document, such as the title and
linked stylesheets.
• Opening tag: <head>
• Closing tag: </head>
d. Body Element:
• Contains the actual content of the web page, such as text, images, and other
elements.
• Opening tag: <body>
• Closing tag: </body>
III. Common HTML Elements:
• a. Headings:
• Used to define headings on a page.
• <h1> to <h6> with <h1> as the highest level and <h6> as the lowest.
• b. Paragraphs:
• <p> is used to define paragraphs.
• c. Links:
• <a> is used to create hyperlinks.
• Example: <a href="https://www.example.com">Visit
Example.com</a>
III. Common HTML Elements:
d. Lists:
• <ul> for unordered lists (bulleted).
• <ol> for ordered lists (numbered).
• <li> for list items.
e. Images:
• <img> is used to embed images.
• Example: <img src="image.jpg" alt="Description">
Table
<table> </table> Specifies a table.
<tr> </tr> Specifies a row in the table.

<th> </th> Specifies header cell in the table.

<td> </td> Specifies the data in an cell of the


table.

<caption> </caption> Specifies the table caption.

Specifies a group of columns in a


<colgroup> </colgroup> table for formatting.
Table
<table border=?> Sets the width of the border around table cells
<table cellspacing=?> Sets amount of space between table cells
Sets amount of space between a cell's border
<table cellpadding=?> and its contents

<table width=?> Sets width of the table in pixels or as a


percentage

<tr align=?> Sets alignment for cells within the row


(left/center/right)

<td align=?> Sets alignment for cells (left/center/right)


Table
Sets vertical alignment for cells within the row
<tr valign=?> (top/middle/bottom)
<td valign=?> Sets vertical alignment for cell
(top/middle/bottom)
<td rowspan=?> Sets number of rows a cell should span
(default=1)
<td colspan=?> Sets number of columns a cell should span

<td nowrap> Prevents lines within a cell from being broken to


fit
Merging rows and columns
Frames
• Frames help us to divide the browser’s window into multiple
rectangular regions.
• Each region contains separate html web page and each of them work
independently.
Frames
Tag Description

It is replacement of the <body> tag. It


doesn’t contain the tags that are
<frameset> </frameset> normally used in <body> element;
instead it contains the <frame> element
used to add each frame.
Specifies the content of different frames
<frame> </frame> in a web page.

It is used to set the default target frame


<base> </base> in any page that contains links whose
contents are displayed in another frame.
Forms
• Forms are used to input the values. These values are sent to the
server for processing.
• Forms uses input elements such as text fields, check boxes, radio
buttons, lists, submit buttons etc. to enter the data into it.
Forms
Tag Description

<form> </form> It is used to create HTML form.

<input> </input> Specifies the input field.

Specifies a text area control that allows


<textarea> </textarea> to enter multi-line text.

<label> </label> Specifies the label for an input element.


Forms
<select name=?> </select> Creates a pulldown menu

<input type="checkbox" name=? value=?> Creates a checkbox

<input type="radio" name=? value=?> Creates a radio button.

<input type="submit" value=?> Creates a submit button. Value sets the text
in the submit button.
<input type="image" name=? src=? Creates a submit button using an image.
border=? alt=?>

<input type="color" name=?> Sets a single-line text box for picking a color

<input type="search" name=?> Sets a single-line text box for searching


CSS
• CSS is acronym of Cascading Style Sheets. It helps to define the
presentation of HTML elements as a separate file known as CSS file
having .css extension.
• CSS helps to change formatting of any HTML element by just making
changes at one place. All changes made would be reflected
automatically to all of the web pages of the website in which that
element appeared.
Selector {property: value;}
Key Points
• Selector is HTML element to which CSS rule is applied.
• Property specifies the attribute that you want to change
corresponding to the selector.
• Property can take specified value.
• Property and Value are separated by a colon (:).
• Each declaration is separated by semi colon (;).
Eg. P { color : red;}
Types of CSS
i. Inline Style Sheets
ii. Embedded Style Sheets
iii. External Style Sheets
Inline Style Sheets
Inline Style Sheets are included with HTML element i.e. they are placed
inline with the element.
To add inline CSS, we have to declare style attribute which can contain
any CSS property.
<Tagname STYLE = “ Declaration1 ; Declaration2 “> …. </Tagname>

<h1 style="color:blue;">This is a Blue Heading</h1>


Embedded Style Sheets
• Embedded Style Sheets are used to apply same appearance to all
occurrence of a specific element.
• These are defined in <head> element by using the <style> element
<head>
<title> …. </title>
<style type =”text/css”> …….CSS Rules/Styles….
</style> </head>
External Style Sheets
• External Style Sheets are the separate .css files that contain the CSS
rules.
• These files can be linked to any HTML documents using <link> tag
with rel attribute.
<head>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
CSS ATTRIBUTES
CSS Fonts: <style>
h1 {
color: blue;
The CSS color property defines the text
font-family: verdana;
color to be used.
font-size: 300%;
The CSS font-family property defines }
the font to be used.
p{
The CSS font-size property defines the color: red;
text size to be used. font-family: courier;
font-size: 160%;
}
</style>
CSS ATTRIBUTES 1{
color: blue;
CSS Border: font-family: verdana;
The CSS border property defines a font-size: 300%; }
border around an HTML element. p{
CSS Padding: color: red; font-size: 160%; border: 2px
solid powderblue; padding: 30px;
The CSS padding property defines a margin: 50px; }
padding (space) between the text and </style>
the border.
<body>
CSS Margin: <h1>This is aheading</h1>
The CSS margin property defines a <p>This is aparagraph.</p>
margin (space) outside the border. </body>
</html>
CSS ATTRIBUTES 1{
color: blue;
CSS Border: font-family: verdana;
The CSS border property defines a font-size: 300%; }
border around an HTML element. p{
CSS Padding: color: red; font-size: 160%; border: 2px
solid powderblue; padding: 30px;
The CSS padding property defines a margin: 50px; }
padding (space) between the text and </style>
the border.
<body>
CSS Margin: <h1>This is aheading</h1>
The CSS margin property defines a <p>This is aparagraph.</p>
margin (space) outside the border. </body>
</html>
POP QUIZ
• WHAT IS THE DIFFERENT BETWEEN FLEX BOX AND CSS GRID
• WHAT IS THE CONCEPT OF CSS VARIABLES AND HOW CAN IT BE USED
TO MAINTAIN THE DESIGN
• WHAT CAN YOU USE IN CREATING A RESPONSIVE DESIGN

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy