Scribd
Upload
2 views

1-Introduction to Web Programming

This document provides an introduction to web programming, focusing on HTML as the standard markup language for web pages. It covers the evolution of HTML, the structure of an HTML document, types of tags, and basic markup rules, as well as the importance of headings and links in HTML. Additionally, it outlines the stages of creating a website and the principles of web-oriented technologies.

Uploaded by

mamedresul1501
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

1-Introduction to Web Programming

This document provides an introduction to web programming, focusing on HTML as the standard markup language for web pages. It covers the evolution of HTML, the structure of an HTML document, types of tags, and basic markup rules, as well as the importance of headings and links in HTML. Additionally, it outlines the stages of creating a website and the principles of web-oriented technologies.

Uploaded by

mamedresul1501
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Lecture 1

ntroduction
to web
programming
Introduction to HTML
HTML (HyperText Markup Language, hypertext markup
language) is a layout system that determines how and
what elements should be placed on a web page. It is the
standard markup language for documents on the World
Wide Web.
The HTML language is interpreted by browsers and
rendered as a document in a human-readable form.

The HTML language was developed by British scientist Tim


Berners-Lee around 1986-1991 at the European Center for
Nuclear Research in Geneva (Switzerland), and was
originally created as a language for the exchange of
scientific and technical documentation, suitable for use by
people who are not specialists in the field of layout .
HTML evolution
HTML 2.0 1995 y

HTML 3.2 1996 y


HTML 4.0 1997 y

HTML 4.01 1999 y


HTML 5 2006 y
The principle of working Web-oriented technologies
A web application is a client-server application in which the browser is the client and
the web server is the server. The application logic focuses on the server, and the
function of the browser is mainly to display information downloaded over the network
from the server and transfer user data back.

Client Server

Query One advantage of this approach is


the fact that clients are independent
of the user's particular operating
Answer system, and web applications are
(HTML, CSS, JavaScript)
thus cross-platform services.
Stages of creating a website

• ideas
• Website layout design
• Layout
• Site dynamics
• Website programming
• Production
Structure of HTML Document
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
Structure of HTML Document

<!DOCTYPE> The <!DOCTYPE> element is intended to indicate the type of the current document
- DTD (document type definition, document type description). This is necessary so
that the browser understands how to interpret the current web page.

<html> </html> Specifies the beginning of an HTML file. Inside it is stored the title (<head>) and the
body of the document (<body>).

<head> </head> The title of a document can contain text and tags, but its content is not shown
directly on the page, except for the <title> container.

<title> </title> Specifies the title of the web page

<body> </body> The body of the document is intended to contain the tags and content of the web
page.
Tags in HTML

A tag is a markup element in an HTML document. There are 2 types of tags: paired and single. Paired tags
have start and end tags, and can contain different content, including other tags. Single tags do not have a
closing tag, and end with "/>".

Attribute. A markup element can Attribute value


store multiple attributes.

<body id="container"> Markup element.


Opening and closing The content of the Borders are described
tags element. Text or other tags by opening and closing
can be stored here. tags
</body>
Inline and block elements

1. Inline elements in the general stream are located sequentially on one line
one after another. Inline elements include <img>, <span>, <a>, <q>,
<code> tags, etc., as well as elements that have the display property set to
inline.
2. Block elements in the general flow are arranged sequentially one under
the other. By default, two block elements cannot be on the same line.
Block elements include <address>, <blockquote>, <div>, <fieldset>,
<form>, <h1>,...,<h6>, <hr>, <ol>, <p>, < pre> , <table> , <ul> and some
obsolete ones. An element also becomes block if its display property is set
to block, list-item, or table in the style.
Basic markup rules

1.Elements must not overlap: if the start tag is inside an


element, then the corresponding end tag must be inside the
same element.
2.Block elements can contain nested block and text elements.
3.Text elements can contain nested text elements.
4.Text elements cannot contain nested block elements.
Basic elements for working with text
<p> </p> Tag for creating a block of text - a paragraph.
<pre></pre> A container that displays formatted content.

< br /> An unpaired tag for wrapping text to the next line.
<strong></strong>; Displays content in bold.
<b></b>
<i> </i> ; _ _ <em> Displays content in italics.
</em> _ _ _
<sub></sub> Displays content in subscript.
<sup></sup> Displays content in superscript.
<span></span> Designed to format the text of the document.
<center></center> Aligns the content in the center relative to the parent element.
Introduction to HTML
Headings
Headings show the importance of the section
they refer to. The more headline and its
"weight", the more significant it is.
The higher the heading level, the larger the font
size. The top level is level 1 (<h1>) and the
bottom level is level 6 (<h6>).
Search engines add ranking to text if it is within
a title tag.
Search engines are recommended to use on the
page: h1 - one; h2 - about 2-4; h3 - around 4-
8...
Introduction to HTML
Links
Links are the basis of hypertext documents and allow you to jump from one web page to
another, or to information of any other type, if you have access to it.
< a href ="#"> link </ a > is a container that makes all text content inside
itself a link.
Attributes:
• href is an attribute that contains the address of the page to which the link leads.
• target - how to open the link:
– _blank _ - loads the page in a new browser window.
– _self _ — loads the page into the current window (set by default).
• title - a pop-up window with a hint.
• name — the name of the markup element (can be for almost any markup element).
Introduction to HTML
Links
An anchor is a bookmark with a unique
< a name ="top" > name at a specific place on a web
</a> page, designed to create a link to it.
To create an anchor you need:
......
make a bookmark in the appropriate
< a href ="#top" >
place and give it a name using the
name attribute of the <a> tag;
......
create a link that uses the name of the
< a href ="#top" >
bookmark as the href to jump to the
anchor, followed by a pound sign (#).
Thanks for attention!

You might also like