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

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.
Nội dung trích xuất từ tài liệu:
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 • ...