Web Engineering

Lecture 7-8-9

MAJID MUMTAZ Department of Computer Science, CIIT Wah

1

Week 4-5 lectures Agenda

• HTML Styling • HTML formatting • HTML Multimedia (Image media, audio, video tags) • Table tag, creation, usage • HTML Form tag • HTML Ifram • HTML color

2

HTML – Hypertext Markup Language (standard tags)

Head Tag

HTML Tag

Body Tag

First Web Page

3

HTML Styling

• Every HTML element has a default

style (background color is white and text color is black). Changing the default style of an HTML element, can be done with the style attribute. Example

•

This is a heading

This is a paragraph.

Note: style="property:value"

4

HTML Formatting Elements

• Formatting elements were designed to display

special types of text: – Bold text----------- – Important text------ and – Italic text----------- – Emphasized text------- – Marked text (highlighted text)------- – Small text---------------- – Deleted text---------- – Inserted text--------- – Subscripts----------- – Superscripts---------

5

HTML Multimedia

• Multimedia on the web, is sound, music, videos,

movies, and animations.

Examples: Pictures, music, sound, videos, records, films, animations, and more. Multimedia files also have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi. Common Video Formats (MP4) MP4 is the new and upcoming format for internet video. MP4 is recommended by YouTube. MP4 is supported by Flash Players MP4 is supported by HTML5.

6

Examles video tag

Your browser does not support the video tag.

Note: The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes otherwise video will flicker while loading on browser. The elements can link to different video files. To start a video automatically use the autoplay attribute.

7

HTML audio tag

Note: The controls attribute adds audio controls, like play, pause, and volume. Multiple elements can link to different audio files. The browser will use the first recognized format. Plug-ins can be added to web pages with the tag or the tag. Examples of well-known plug-ins are Java applets. Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank id, etc.

8

HTML – Hypertext Markup Language (cont.)

• HTML Tables

– Tables are defined with the

tag. – A table is divided into rows with the tag. (tr

stands for table row)

– A row is divided into data cells with the

12

HTML – Hypertext Markup Language (cont.)

• HTML Forms

– HTML forms are used to pass data to a server. It contains input elements like text fields, checkboxes, radio-buttons, submit buttons, select lists, textarea, fieldset, legend, and label elements.

– Form tag syntax
. input elements .

– Two important attributes for form tag are

• Action: attribute specifies the URL to the server-side script (including the filename) that

will process the form when it's submitted.

• method : accept one of two possible values: post or get

– post method includes the form data in the body of the form and sends it to the web server – get method appends the data to the URL specified in the action attribute and most often is

used in searches.

13

HTML – Hypertext Markup Language (cont.) • HTML Forms - The Input Element

– important form element is the element. It is used to select user information. It varies, And element can be of type text field, checkbox, password, radio button, submit button, and more.

– Text Fields defines a one-line input field that a user can enter text into: e.g.

First name:
Last name:

14

HTML – Hypertext Markup Language (cont.)

• HTML Forms - The Input Element

– Password Field e.g. defines a password

field:
Password:

15

HTML – Hypertext Markup Language (cont.)

• HTML Forms - The Input Element

– Radio Buttons defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: e.g.

Male
Female

16

HTML – Hypertext Markup Language (cont.)

• HTML Forms - The Input Element

– Checkboxes defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices. E.g.

I have a bike
I have a car

17

HTML – Hypertext Markup Language (cont.)

• HTML Forms - The Input Element

– Submit Button defines a submit button. It is

used to send form data to a server. The data is sent to the page specified in the form's action attribute. E.g.

method="get"> Username:

18

HTML – Hypertext Markup Language (cont.) • Creating Large Text-Entry Fields with textarea

–

• Creating Drop down Menus with select and

option –

Please pick a travel destination:

19

HTML – Hypertext Markup Language (cont.)

• HTML Iframes

– An iframe is used to display a web page within a web

page. The syntax would be

– Set Height and Width

• The height and width attributes are used to specify the

height and width of the iframe. E.g.

– Use iframe as a Target for a Link

page1.htm

20

HTML – Hypertext Markup Language (cont.)

• HTML Colors

– Colors are displayed combining RED, GREEN, and

BLUE light. CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). Lowest value would be light sources is 0 (hex 00). The highest value is 255 (hex FF).

21

HTML – Hypertext Markup Language (cont.)

• Color Names Supported by All Browsers

– 140 color names are defined in the HTML and CSS

color specification (17 standard colors plus 123 more).

Visit below mentioned URL’s for more detail...

http://www.w3schools.com/html/html_colornames

.asp

• Color Values http://www.w3schools.com/html/html_colorvalues

.asp

22

HTML – Hypertext Markup Language (cont.)

Content goes here

23

HTML – Hypertext Markup Language (cont.)

24

Questions

25

Tài liệu liên quan

Tài liêu mới

Giới thiệu

Về chúng tôi

Việc làm

Quảng cáo

Liên hệ

Chính sách

Thoả thuận sử dụng

Chính sách bảo mật

Chính sách hoàn tiền

DMCA

Hỗ trợ

Hướng dẫn sử dụng

Đăng ký tài khoản VIP

Zalo/Tel:

093 303 0098

Email:

support@tailieu.vn

Phương thức thanh toán

Theo dõi chúng tôi

Facebook

Youtube

TikTok

chứng nhận
Chịu trách nhiệm nội dung: Nguyễn Công Hà
Doanh nghiệp quản lý: Công ty TNHH Tài Liệu trực tuyến Vi Na - GCN ĐKDN: 0307893603
Địa chỉ: 54A Nơ Trang Long, P. Bình Thạnh, TP.HCM - Điện thoại: 0283 5102 888 - Email: info@tailieu.vn
Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015
tag. (td

stands for table data)

– A row can also be divided into headings with the

tag. (th stands for table heading)

– The

elements are the data containers in the

table.

– The

elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.

9

HTML – Hypertext Markup Language (cont.)

• Table with a Border Attribute •

Ali

Ahmed

50

Mohsin

Ali

94

Ali Ahmed 50
Mohsin Ali 94

• Note: Border attribute is way out from HTML standard, its better to use CSS.

–

10

HTML – Hypertext Markup Language (cont.)

• Table with Cell Padding and Cell spacing

– Cell padding specifies the space between the cell

content and its borders.

– Cell spacing affects the amount of space between

cells. By default, many browsers draw tables with a cell padding and cell spacing of two pixels.

Ali

Ahmed

50

th,td {

94

Mohsin

Ali

padding:15px;

} – rowspan attribute creates a cell that spans multiple rows. The colspan attribute creates a cell that spans multiple columns. i.e. Use the colspan attribute to make a cell span many columns

11

HTML – Hypertext Markup Language (cont.)

• Table Headings

– Table headings are defined with the

tag – By default, all major browsers display table headings as

Students Detail

Firstname Lastname

Points

Ali

Ahmed

50

bold and centered: – Table captions tell your visitor what the table is for i.e.

Mohsin

Ali

94

Students Detail