Web engineering: Lecture 7, 8, 9 - Majid Mumtaz

Chia sẻ: You You | Ngày: | Loại File: PDF | Số trang:25

Thêm vào BST

Báo xấu

41
lượt xem 3
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Upon completion of this lesson, the successful participant will be able to: HTML Styling; HTML formatting; HTML Multimedia (Image media, audio, video tags); table tag, creation, usage; HTML Form tag; HTML Ifram; HTML color. Inviting you to refer.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Web engineering: Lecture 7, 8, 9 - Majid Mumtaz

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) First Web Page Head Tag HTML Tag Body Tag 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 Your browser does not support the audio element. 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 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 Ali Ahmed 50 50 Mohsin Ali 94 Mohsin Ali 94 • Note: Border attribute is way out from HTML standard, its better to use CSS. – table,th,td { border:1px solid black; border-collapse:collapse; } 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. th,td Ali Ahmed 50 { padding:15px; Mohsin Ali 94 } – 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 bold and centered: Students Detail – Table captions tell your Firstname Lastname Points visitor what the table is for i.e. Ali Ahmed 50 Mohsin Ali 94 Students Detail 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. Username: 18
HTML – Hypertext Markup Language (cont.) • Creating Large Text-Entry Fields with textarea – Wah Cantt Rawalpindi Islamabad Islamabad 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. page1.htm 20