Scribd
Upload
17 views

Web Design-Lecture 2 - HTML

The document provides an introduction to HTML, covering topics such as what HTML is, how websites are created using HTML, the basics of HTML tags and elements, and examples of common text formatting tags in HTML.

Uploaded by

James Lues
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Web Design-Lecture 2 - HTML

The document provides an introduction to HTML, covering topics such as what HTML is, how websites are created using HTML, the basics of HTML tags and elements, and examples of common text formatting tags in HTML.

Uploaded by

James Lues
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Web Design Faculty of Science

Computer Science Dept.


Second Stage
Lecture 2:
Introduction to HTML

Hoshang Qasim
E-mail: [email protected]
2021
What is Website concept?

• website refers to a ‘site’ on the ‘web’ where you can put information
about your business or organization and internet users can access it by
using the internet.

• website is a collection of publicly accessible, interlinked Web pages that


share a single domain name.

• Websites can be created and maintained by an individual, group, business


or organization to serve a variety of purposes.
2
How Website are created?

What you see?

• When you are looking at a website, it is most likely that your browser will
be receiving HTML and CSS from the web server that hosts the site.

• The web browser interprets the HTML and CSS code to create the page
that you see.

3
• Most web pages also include extra content such as images, audio, video,
or animations.
How Website are created?

How it is created?
• Small websites are often written just using HTML and CSS.
• Larger websites — in particular those that are updated regularly and use a
content management system, or e-commerce software — often make use
of more complex technologies on the web server, but these technologies
are actually used to produce HTML and CSS that is then sent to the
browser.
• If your site uses these technologies, you will be able to use your new
HTML and CSS knowledge to take more control over how your site looks
4
How Website are created?

HTML5 & CSS3


• Since the web was first created there have been several versions of HTML
and CSS - each intended to be an improvement on the previous version.
• Till today, HTML5 & CSS3 were still being developed. Although they had
not been finalized.
• Many browsers were already supporting some features of these
languages and a lot of people were using the latest code on their
websites.
• Because HTML5 and CSS3 build on previous versions of these languages,
5 learning these means you will also be able to understand the earlier
versions of them.
HTML vs CSS

6
Basics of HTML

What is HTML?
• First developed by Tim Berners-Lee in 1990,
• HTML is a computer language devised to allow website creation.
• HTML is a markup language for describing web documents (web pages).
• HTML stands for Hyper Text Markup Language.
• An HTML file is a text file containing markup tags.
7
• HTML is a Language, as it has code-words and syntax like any other language.
Basics of HTML

How Does it work?

• HTML consists of a series of short codes typed into a text-file.


• The text is then saved as a .html or .htm file.
• Viewed through a browser, like Internet Explorer or any browsers.

• This browser reads the file and translates the text into a visible form
8
Basics of HTML

What is HTML tag


• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• 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 element content
• HTML tags are not case sensitive, <b> means the same as <B>
9

• Normally written HTML tags by lowercase .


Basics of HTML

How to write and make code for html?

• It does not require expensive development tools, You can start with a
simple text editor such as Notepad.
• Since it is an interpreted language inside the context of a web browser, you
don't even need to buy a compiler.
Macromedia
Microsoft
Dreamweaver Sublime Text
FrontPage
MX

10 Notepad ++
What is HTML

First Example

<html>
<head>

<title> Page Title </title>


</head>

<body>

This is my first home page


<b> this is bold text</b>

</body>
11 </html>
What is HTML
Explain the first example
• <html> first tag in html, this tag tell the browsers that is start of an html document

• </html> Last tag in html, this tag tell the browsers this is the end of the html
document.

• <head>….</head> text between those two tags are header, also header information
is not displayed in the browsers window

• <title>…..</title> the text between those two tags are title of the document and is
displayed in the browsers
12

• <b>…</b> text between those two tags are shown as a bold text
Tags and elements HTML

Example
Element • The opening tag says, “This is the beginning of a heading”

• The closing tag says, “This is the end of a heading.


<hl> About Google </hl>

content
Opening tag Closing tag

13
Skeleton of HTML
HTML

<html>
• four main elements that form the basic structure of every document:
<html>, <head>, <title>, and <body>
<head>
• These four elements should appear in every HTML document
• Its called skeleton of the HTML document
<title>
• without the skeleton HTML files will not be rendered correctly
in web browsers
<body>

14
Skeleton of HTML5

• Visualization of an
HTML page structure:

15 Note Only the <body> area (the white area) is displayed by the bowser.
Basics of HTML

Basic tag structure


• The most important tags in html are tags that define headings, paragraphs and
line breaks.
Headings
• Heading are defined with the <h1> to <h6> tags.<h1> defines the largest heading.
<h6> define the smallest heading.
<body>
<h1>this is heading</h1>
<h2>this is heading</h2>
<h3>this is heading</h3>
<h4>this is heading</h4>
<h5>this is heading</h5>
16
<h6>this is heading</h6>
</body>
Basics of HTML

Paragraph
• Paragraphs are define with the <p> tag:

<body>
<p> this is paragraph</p>
<p>
HTML is a computer language devised to allow
website creation.
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing markup
tags.
HTML is a Language, as it has code-words and
syntax like any other language.
17 </p>
</body>
Basics of HTML

Line Breaks
• The <br> tag is used when you want to break a line , but don’t want to start a new
paragraph.
<html>
<body>
<p> this <br> is a para <br>graph with line
breaks</p>
</body>
</html>

<html>
<body>
<p> this is a para graph with line breaks</p>
18
</body>
</html> Without line break
Basics of HTML

HTML attributes

• Attributes provides additional information to an HTML element.


• Attributes always come in name/value pairs like this name=“value”.
• Attributes are always specified in the start tag of an HTML element.
<h1>this is heading</h1> <h1 align=“center”>this is heading</h1>

19
Without Attribute
Basics of HTML

alignment attributes

<html>
<body>
<h1 align="center">This is heading1</h1>
<p>
Attributes provides additional information to
an HTML element.
Attributes always come in name/value pairs
like this name=“value”.
<h2 align="right">This is heading2</h2>
</p>
</body>
</html>
20
Basics of HTML

Background color attributes


<html>
<head>
<title>Home Page</title>
</head>
<body bgcolor="orange">
<h1 align="center">This is heading1</h1>
<p>
Attributes provides additional information
to an HTML element.
Attributes always come in name/value
pairs like this name=“value”.
<h2 align="right">This is heading2</h2>
</p>
21 </body>
</html>
Basics of HTML

Text formatting

<html>
<body>
This is normal text<br>
<b>This is bold text formating</b><br>
<strong>This is strong text formating</strong> <br>
<i>This is italic text formating</i><br>
<del>This is bold text formating</del> <br>
<ins>This is bold text formating</ins> <br>
</body>
</html>
22
Basics of HTML

Text formatting
<P> VS <pre>
<body>
<p>
this is
preformatted text.
it preserve both space
and line break
</p>
<pre>
this is
preformatted text.
it preserve both space
and line break
23
</pre>
</body>
Basics of HTML

Text formatting

<html>
<body>
<code> computer code</code>
<br>
<kbd>keyboard input</kbd>
<br>
<tt>teletype text</tt>
<br>
<samp>sample text</samp>
<br>
<var>computer variable</var>
</body>
24
</html>
Basics of HTML

Text formatting

<html>
<body>
<address>
Kurdistan<br>
Erbil<br>
Soran<br>
kawa street<br>
</address>
</body>
</html>
25
Basics of HTML

Text Direction

<html>
<body>
<p>
Here is some Hebrew text
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
26
Basics of HTML

Marquee & Quotation

<html>
<body>
<q>
here is short qoutation
</q>
<br>
<marquee>
<h1> Soran University <h1>
</marquee>

27
</body>
</html>
Basics of HTML

Marquee direction
<html>
<marquee>
<h1> Soran University <h1>
</marquee>
<marquee direction="up">
<h1> Soran University <h1>
</marquee>
<marquee direction="down">
<h1> Soran University <h1>
</marquee>
<marquee direction="right">
<h1> Soran University <h1>
28 </marquee>
</html>
Fast Information

• You may know that HTML stands for Hyper-Text Markup Language.
• The Hyper-Text part refers to the fact that HTML allows you to create
links that allow visitors to move from one page to another quickly and
easily.
• A markup language allows you to interpret text, and these
interpretations provide additional meaning to the contents of a
document.
• If you think of a web page, we add code around the original text we
want to display and the browser then uses the code to display the page
29
correctly.
Summary

• HTML pages are text documents.


• HTML uses tags (characters that sit inside angled brackets) to give the
information they surround special meaning.
• Tags are often referred to as elements.
• Tags usually come in pairs.
• The opening tag denotes the start of a piece of content; the closing tag
denotes the end.
• Opening tags can carry attributes, which tell us more about the
content of that element.
• Attributes require a name and a value.
30

You might also like