Scribd
Upload
68 views

HTML Css Tutor

The document provides information about HTML & CSS Lesson 1. It discusses the LAMP stack components including Linux, Apache, MySQL, and PHP/Perl. It also describes the 3-tier architecture with presentation, process, and data tiers. Finally, it begins explaining basic HTML tags and structure.

Uploaded by

ilias ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
68 views

HTML Css Tutor

The document provides information about HTML & CSS Lesson 1. It discusses the LAMP stack components including Linux, Apache, MySQL, and PHP/Perl. It also describes the 3-tier architecture with presentation, process, and data tiers. Finally, it begins explaining basic HTML tags and structure.

Uploaded by

ilias ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

HTML & CSS -Lesson 1

IT Lecturerer: ilias ahmed,md


alauddin,shoshag shiekh

1 TECHALVEE.com
2 LAMP WAMP XAMPp

– Linux: the base operating system for a LAMP system is typically the Linux
operating system. Sun Microsystems saw the advantage of the LAMP
architecture and open sourced Solaris in an effort to increase their footprint in
the web services market.
– Apache: is the traditional web server. It has a longer history, better support,
and more systems administrators comfortable with its configuration and
maintenance. It also can support J2EE applications as easily as a PHP or Python
application.
– MySQL: is the most popular of the open source relational databases. It’s fast,
easy to maintain, and has a large user base. It supports clustering, replication,
and has a variety of backup solutions.
❑Python/Perl/PHP: is an embedded templating / programming language similar
to ASP. PHP is a very capable web application language. It integrates very well
TECHALVEE.com

with Apache and is well understood by the vast majority of Systems


3 3-tier architecture
framework

Presentation Process
tier tier

Transport
Client tier

Middle tier Data tier

Application Data source


server
TECHALVEE.com
4 3-tier architecture
framework
– Presentation tier : This tier displays user’s interface. It gets data from
Middle tier and show on screen.
– Middle tier : This tier is divided into 2 small tiers
– Process tier : To get original data from Transport tier. The original data
will be filtered to remove unnecessary data, and then data will be sent to
Presentation tier.
– Transport tier : This tier communicates with Data tier. It sends demands
to Data tier and receives responses from Data tier. If the response is
data, the data will be sent to Process tier.
– Data tier : It is database. This tier get demands from Transport tier and
then access database and sending response back to Transport tier.
TECHALVEE.com
5 HTML 1

<!DOCTYPE html>
<html>
<body>
<h1>PHP Online</h1>
<p>Good luck</p>
</body>
</html>

– The DOCTYPE declaration defines the document type


– The text between <html> and </html> describes the web page
– The text between <body> and </body> is the visible page content
– The text between <h1> and </h1> is displayed as a heading
TECHALVEE.com
– The text between <p> and </p> is displayed as a paragraph
6 HTML 1

<!DOCTYPE html>
<html>
<body>
<h1>PHP Online</h1>
<p>Good luck</p>
</body>
</html>

– The DOCTYPE declaration defines the document type


– The text between <html> and </html> describes the web page
– The text between <body> and </body> is the visible page content
– The text between <h1> and </h1> is displayed as a heading
TECHALVEE.com
– The text between <p> and </p> is displayed as a paragraph
7 HTML 1
What is HTML?
– HTML is a language for describing web pages.
– HTML stands for Hyper Text Markup Language
– HTML is a markup language
– A markup language is a set of markup tags
– The tags describes document content
– HTML documents contain HTML tags and plain text
– HTML documents are also called web pages

TECHALVEE.com
8 HTML 1

HTML Page Structure


Below is a visualization of an HTML page structure:

TECHALVEE.com
9 HTML 1

TECHALVEE.com
10 HTML Editor
– Edit Your HTML with Notepad

– Save Your HTML


– Select Save as.. in Notepad's file menu.
– When you save an HTML file, you can use either the .htm or the .html file extension.
There is no difference, it is entirely up to you.

– Run the HTML in Your Browser


TECHALVEE.com
– Start your web browser and open your html file from the File, Open menu, or just
11 HTML Editor
– HTML Headings: HTML headings are defined with the <h1> to <h6> tags.

<!DOCTYPE html>
<html>
<body>
<h1>PHP Online</h1>
<h2>Hello PHP World!</h2>
<h3>HTML Heading</h6>
</body>
</html>

TECHALVEE.com
12 HTML Editor
– HTML Paragraphs: HTML paragraphs are defined with the <p> tag.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

TECHALVEE.com
13 HTML Editor
<!DOCTYPE html>
<html>
<body>
<p align="left">
Baby, life was good to me<br>
But you just made it better<br>
I love the way you stand by me<br>
Through any kind of weather<br>
</p>
</body>
</html>

TECHALVEE.com
14 HTML Editor
<!DOCTYPE html>
<html>
<body>
<p align="center">
I don't wanna run away, just wanna make your day<br>
When you feel the world is on your shoulders<br>
I don't wanna make it worse, just wanna make us work<br>
Baby, tell me I will do whatever<br>
</p>
</body>
</html>

TECHALVEE.com
15 HTML Editor
<!DOCTYPE html>
<html>
<body>
<p align="right">
It feels like nobody ever knew me until you knew me<br>
Feels like nobody ever loved me until you loved me<br>
Feels like nobody ever touched me until you touched me<br>
Baby, nobody, nobody until you
<br>
</p>
</body>
</html>

TECHALVEE.com
16 HTML Editor
– <address>: defines the contact information for the author/owner of a
document or an article.
<!DOCTYPE html>
<html>
<body>
<address>
Lecturer<br>
Ngo Dinh Cuong<br>
15A Quang Trung, Danang, Vietnam<br>
0511 3 709 666<br>
</address>
</body>
</html>

TECHALVEE.com
17 HTML Tag - <br>
Definition and Usage
– The <br> tag inserts a single line break.
– The <br> tag is an empty tag which means that it has no end tag.

Tips and Notes


– Tip: The <br> tag is useful for writing addresses or poems.
– Note: Use the <br> tag to enter line breaks, not to separate paragraphs.
DNICT <br> Da Nang Information and Communication Technology

TECHALVEE.com
18 HTML Editor
– HTML Links: HTML links are defined with the <a> tag.
<!DOCTYPE html>
<html>
<body>
<a href=“http://www.dnict.vn/daotao”>DNICT – Dao
tao</a></body>
</html>

– HTML Images: HTML images are defined with the <img> tag.
<!DOCTYPE html>
<html>
<body>
<img src=“dnict.jpg" width="104" height="142">
</body>
</html>

TECHALVEE.com
19 HTML Tage - <meta>
Metadata is data (information) about data.
– The <meta> tag provides metadata about the HTML document. Metadata will
not be displayed on the page, but will be machine parsable.
– Meta elements are typically used to specify page description, keywords,
author of the document, last modified, and other metadata.
– The metadata can be used by browsers (how to display content or reload
page), search engines (keywords), or other web services.
Tips and Notes
– Note: <meta> tags always goes inside the <head> element.
– Note: Metadata is always passed as name/value pairs.
– Note: The content attribute MUST be defined if the name or the http-equiv
attribute is defined. if none of these are defined, the content attribute
TECHALVEE.com
20 HTML Editor - <meta>
Attributes

TECHALVEE.com
21 HTML Editor - <meta>

<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Ståle Refsnes">
<meta charset="UTF-8">
</head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1>Đà Nẵng</h1>
</body>
</html>

TECHALVEE.com
22 HTML Editor
– HTML Unordered Lists: An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</html>

– HTML Ordered Lists: An ordered list starts with the <ol> tag. Each list item
<!DOCTYPE html>
starts with <html>
the <li> tag.
<body>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>TECHALVEE.com
</html>
23 HTML Editor
– HTML Definition Lists:
– A definition list is a list of items, with a description of each item.
– The <dl> tag defines a definition list.
– The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd>
(describes the item in the list):
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</html>

TECHALVEE.com
24 Try It Yourselft
Question 1: To write a simple web with using heading 2 and <p> paragraph tag
Question 2: To make a simple web that introduces your information including
fullname, address, birthday, age, job and hobbies

TECHALVEE.com
Hello every one, this is techalvee solution
every student will be 10 project in each
module

TECHALVEE.com

You might also like