HTML&CSS Lesson 1.pptx

7/27/2019 HTML&CSS Lesson 1.pptx

1/25

HTML & CSS -LESSON 1

IT Lecturerer: Ngo Dinh Cuong


2/25

LAMP

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, bettersupport, 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.

Its fast, easy to maintain, and has a large user base. It supportsclustering, 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 with Apache and is well understood by the vast

majority of Systems Administrators.


3/25

LAMP


4/25

3-tier architecture framework

Client

Application

serverData source

Presentation

tier

Process

tier

Transport

tier

Middle tier Data tier


5/25

3-tier architecture framework

Presentation tier : This tier displays users interface. It gets data

from Middle tier and show on screen.

Midd le 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.


6/25

HTML 1

The DOCTYPE declaration defines the document type The text between and describes the web page

The text between and is the visible page content

The text between and is displayed as a heading

The text between

and
is displayed as a paragraph
PHP Online

Good luck


7/25

HTML 1

The DOCTYPE declaration defines the document type The text between and describes the web page

The text between and is the visible page content

The text between and is displayed as a heading

The text between

and
is displayed as a paragraph
PHP Online

Good luck


8/25

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 markuptags

The tags describesdocument content

HTML documents containHTMLtagsand plain text

HTML documents are also calledweb pages


9/25

HTML 1

HTML Page Structure

Below is a visualization of an HTML page structure:


10/25

HTML 1


11/25

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

Start your web browser and open your html file from the File, Openmenu,

or just browse the folder and double-click your HTML file.


12/25

HTML Editor

HTML Headings: HTML headings are defined with the to

tags.

PHP OnlineHello PHP World!HTML Heading


13/25

HTML Editor

HTML Paragraphs: HTML paragraphs are defined with the

tag.

This is a paragraph.

This is another paragraph.


14/25

HTML Editor

Baby, life was good to me

But you just made it better

I love the way you stand by me

Through any kind of weather


15/25

HTML Editor

I don't wanna run away, just wanna make your day

When you feel the world is on your shoulders

I don't wanna make it worse, just wanna make us work

Baby, tell me I will do whatever


16/25

HTML Editor

It feels like nobody ever knew me until you knew me

Feels like nobody ever loved me until you loved me

Feels like nobody ever touched me until you touched me

Baby, nobody, nobody until you


17/25

HTML Editor

: defines the contact information for the author/owner of a

document or an article.

Lecturer

Ngo Dinh Cuong

15A Quang Trung, Danang, Vietnam

0511 3 709 666


18/25

HTML Tag -

Definition and Usage

The
tag inserts a single line break.

The
tag is an empty tag which means that it has no end tag.

Tips and Notes

Tip:The
tag is useful for writing addresses or poems.

Note:Use the
tag to enter line breaks, not to separate

paragraphs.

DNICT
Da Nang Information and Communication Technology


19/25

HTML Editor

HTML Links: HTML links are defined with the tag.

HTML Images: HTML images are defined with the tag.

DNICT Dao

tao


20/25

HTML Tage -

Metadatais data (information) about data.

The 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: tags always goes inside the 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 CANNOT be defined.


21/25

HTML Editor -

Attributes


22/25

HTML Editor -

Untitled Document

Nng


23/25

HTML Editor

HTML Unordered Lists:An unordered list starts with the tag.

Each list item starts with the tag.

HTML Ordered Lists:An ordered list starts with the tag. Each list

item starts with the tag.

Coffee

Milk

Coffee

Milk


24/25

HTML Editor

HTML Definition Lists:

A definition list is a list of items, with a description of each item.

The tag defines a definition list.

The tag is used in conjunction with (defines the item in the list) and

(describes the item in the list):

Coffee

- black hot drink

Milk

- white cold drink


25/25

Try It Yourselft

Question 1: To write a simple web with using heading 2 and

paragraph tag

Question 2: To make a simple web that introduces your information

including fullname, address, birthday, age, job and hobbies

Documents

HTML&CSS Lesson 1.pptx