The document discusses HTML topics including the structure of HTML documents, common HTML tags, text formatting, lists, and adding graphics. It covers key HTML elements like <html>, <head>, <title>, <body>, and describes tags for headings, paragraphs, line breaks, and bold/italic text. It also explains how to add images with <img> and different types of lists like unordered, ordered, and definition lists.
Let's start learn with me
in this presentation, we learn Basic HTML.
What is HTML?
Why use HTML?
HTML Structure.
How to use HTML?
Step for write HTML code.
Simple HTML Example.
This slide is specifically prepared for CAT grade 11 class and it is aligned with the SA's CAPS document, however, it can be used for other purposes. It is an introduction to HTML fundamental concepts.
Let's start learn with me
in this presentation, we learn Basic HTML.
What is HTML?
Why use HTML?
HTML Structure.
How to use HTML?
Step for write HTML code.
Simple HTML Example.
This slide is specifically prepared for CAT grade 11 class and it is aligned with the SA's CAPS document, however, it can be used for other purposes. It is an introduction to HTML fundamental concepts.
What is HTML?
Telling the browser what to do, and what props to use.
A serises of tags that are integrated into a text document.
Tags are ;
surrounded with angle brackets like this
<b> or <i>.
Most tags come in pairs
exceptions: <p>, <br>, <li> tags …
The first tag turns the action on, and the second turns it off.
After this presentation students will be able to:
1. Define the term hypertext and state the purpose of HTML.
2. Identify the main parts of an HTML document.
3. Identify and state the purpose of different HTML elements.
4. Differentiate between HTML elements, tags, and attributes.
Create web pages using different basic and formatting tags.
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
What is HTML?
Telling the browser what to do, and what props to use.
A serises of tags that are integrated into a text document.
Tags are ;
surrounded with angle brackets like this
<b> or <i>.
Most tags come in pairs
exceptions: <p>, <br>, <li> tags …
The first tag turns the action on, and the second turns it off.
After this presentation students will be able to:
1. Define the term hypertext and state the purpose of HTML.
2. Identify the main parts of an HTML document.
3. Identify and state the purpose of different HTML elements.
4. Differentiate between HTML elements, tags, and attributes.
Create web pages using different basic and formatting tags.
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
ER(Entity Relationship) Diagram for online shopping - TAEHimani415946
https://bit.ly/3KACoyV
The ER diagram for the project is the foundation for the building of the database of the project. The properties, datatypes, and attributes are defined by the ER diagram.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
test test test test testtest test testtest test testtest test testtest test ...
HTML-Part1
1. Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
Chapter 2
Part I
HTML
Topics
a) Hyper Text Markup Language(HTML)
b) HTML TAGs
c) The structure of an HTML program
d) Text Formatting
e) Lists
f) Adding Graphics to HTML Documents
*****************************************************************
I. Hyper Text Markup Language(HTML)
The language used to develop web pages is called HTML.
The HTML is language interpreted by Browser.
Web pages are also called HTML documents.
HTML is a set of special codes that can be embedded in text to add
formatting and linking information.
HTML is specified as TAGS in an HTML documents.
II. HTML TAGs
TAGs are instructions that are embedded directly into a text of the
documents.
HTML TAGs is signal to the browser that it should do something
other than just throw text up on the screen.
HTML TAGs can be of two types:
2. Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
1. Paired tags: Tags to be paired if it along with companion tag,
flanks the text for example <B> tag is paired Tag, with its
companion </B> causes the text between them to be bold.
2. Singular tags: it does not have companion tag for example <BR/>
tag will insert link break; this tag does not require companion tag.
III. The structure of an HTML program
Document Type <HTML> </HTML>
Title <TITLE> </TITLE>
Header <HEAD> </HEAD>
Body <BODY> </BODY>
• HTML document begins and ends with HTML tag i.e. <HTML>
</HTML>
Here <HTML> indicates the browser that it is a HTML document and
</HTML> tells the browser that HTML document is completed.
• Header Tag i.e. <HEAD></HEAD>
Header Tag does not contain any text; it only contains the Title Tag in it.
• Title tag i.e. <TITLE></TITLE>
anything written between this tag is not displayed on the screen but it is
used to identify the Webpage.
• Footer just as title can be placed in the title of the bar of the browser
window; certain information is placed on the foot of web page.
<ADDRESS>…….</ADDRESS>
• Body tag i.e.<BODY></BODY>
this is the main part of HTML document. The content which is to be
displayed on screen as webpage should be written here. Body Tag
contains the text as well as various tags but only the text will be
displayed on Webpage.
3. Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
A simple example
1.<html>
2.<head>
3.<title> My First WEB PAGE </title>
4.<body>
5.HTML is Hyper Text Markup Language
6.</body>
7.<address> address </address>
8.</html>
IV. Text Formatting
Paragraph Breaks: <P> Paragraph Tag is used to begin a new
paragraph i.e. it tells the browser to insert a empty line and then
begin with a new line. A simple example
1.<html>
2.<head>
3.<title> My first web page </title></head>
4.<body>
5.<p>HTML is Hyper Text Markup Language</p>
6.<p>HTML is Easy</p>
7.</body>
8.</html
4. Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
Line Break <br>: Line Break Tag as name indicates it is used to
tell the browser that the line has ended, without skipping blank
line.
Horizontal Rule <hr>: Horizontal Rule Tag will give you a thin
black line across the page.
It has few basic elements.
1) Size: it sets length of the horizontal rule in pixels or in % of
page width.
2) Align: it aligns the horizontal rule to left, right, and center.
3) Width: It specifies the width of the horizontal rule.
Sample Program:
01.<html>
02.<head>
03.<title>Program</title></head>
04.<body>
05.<p>Statement<br>can<br>be<br>broken <br>using line break tag
06.<hr align =left size="2" width="50%" >
07.<p> Web Page can be divided using horizontal rule tag
08.</body>
09.</html>
Heading:
There is tag for various headings in HTML known as Heading tag
ranging from h1 to h6 where h1 is for most important and h6 is for
least important.
5. Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
Example:
01.<html>
02.<head>
03.<title> Heading Example </title></head>
04.<body>
05.<h1>Heading tag </h1>
06.<h2>Heading tag </h2>
07.<h3>Heading tag </h3>
08.<h4>Heading tag </h4>
09.<h5>Heading tag </h5>
10.<h6>Heading tag </h6>
11.</body>
12.</html>
Text styles
Bold: display the text in boldface style. The tags used are
<B>…..</B>.
Example is
<B> Computer Department</B>
Output is
Computer Department
Italic: display text in italic, the tags used are between <I>…..</I>
Example:
<I> Italic</I>
6. Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
Output:
Italic
Underline: display text as underlined, the tags used are
<U> …</U>
Centering (text, Images, etc.):
<CENTER>……</CENTER> tags are used to center everything found
between them-text, lists, images, rules, tables and other pages elements.
Font: Specify the font size, font face and color of text:
<font size="3" color="red">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
V. Lists
Type of Lists
1. Unordered Lists(Bullets)
An unordered list starts with the tag <UL> and ends with </UL> and
each list item starts with the tag <LI>.
Example:
<UL type=”circle”>
<li>Ahmed
<li>Abbas
<li>Ali
</UL>
7. Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
2. Ordered Lists(Numbering)
An ordered list start with the tag <OL> and ends with </OL>.each list
items start with the tag <LI>
<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
Example:
<OL type=”a”>
<li>Ahmed
<li>Abbas
<li>Ali
</OL>
3. Definition Lists
The definition list values is appear within tag <DL> and </DL>.it
consist of two parts
Definition term: appears after the tag <DT>.
Definition description: appears after the tag<DD>.
Example:
<DL>
<DT>Keyboard
8. Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
<DD> an input device
<DT>Printer
<DD>an output device
</DL>
VI. Adding Graphics to HTML Documents
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images
are linked to HTML pages. The <img> tag creates a holding space for
the referenced image.
Tip: To link an image to another document, simply nest the <img>
tag inside <a> tags.
align top
bottom
middle
left
right
Specifies the alignment of an image according to
surrounding elements
alt Text Specifies an alternate text for an image
border Pixels Specifies the width of the border around an image
height Pixels Specifies the height of an image
src URL Specifies the URL of an image
width Pixels Specifies the width of an image
Example:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
