Web Technologies
(HTML)
Lecture # 7
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
HTML Block and Inline Elements, Iframes, and HTML5 Layout, Slides of Web Programming and Technologies
A comprehensive guide on html block and inline elements, iframes, and html5 layout elements. It covers topics such as block-level and inline elements, the <div> and <span> elements, iframes, their attributes, and examples. Additionally, it explains the new semantic elements introduced in html5, including <header>, <nav>, <section>, <article>, <aside>, and <footer>. The document also includes practical examples of how to use these elements in a simple home page.
Typology: Slides
2022/2023
1 / 22
This page cannot be seen from the preview
Don't miss anything!
Related documents
Partial preview of the text
Download HTML Block and Inline Elements, Iframes, and HTML5 Layout and more Slides Web Programming and Technologies in PDF only on Docsity!
Web Technologies
(HTML)
Lecture # 7
Contents
■ Block Elements
■ Inline Elements
■ Iframes
■ HTML5 Layout
HEADER, NAV, ASIDE, SECTION, ARTICLE,
FOOTER
Block-level Elements
■ A block-level element always starts on a
new line and takes up the full width
available (stretches out to the left and
right as far as it can).
■ Examples of block-level elements:
-
Inline Elements
■ An inline element does not start on a new
line and only takes up as much width as
necessary.
■ Examples of inline elements:
Element ■ The element is often used as a container for some text. ■ (^) It defines a section in a document (inline element). ■ (^) When used together with CSS, the element can be used to style parts of the text. Department of
Software Engineering Output Department of Software Engineering
Iframes
■ An iframe is used to display a web page
within a web page.
■ Syntax:
■ defines an inline frame
■ The src attribute specifies the URL (web
address) of the inline frame page.
Example 1
Table Page
Iframe - Target for a Link
■ (^) An iframe can be used as the target frame for a link. ■ The target attribute of the link must refer to the name attribute of the iframe. Click here for BBC News
HTML 5 Layout
■ (^) **** - Defines a header for a document or a section ■ (^) **** - Defines a container for navigation links ■ (^) **** - Defines a section in a document ■ (^) **** - Defines an independent self-contained article ■ (^) **** - Defines content aside from the content (like a sidebar) ■ (^) **** - Defines a footer for a document or a section
Element
■ (^) The element specifies a header for a document or section. ■ (^) This element should be used as a container for introductory content. ■ (^) You can have several elements in one document.
University of Malakand
Element
■ (^) The element defines a set of navigation links. ■ (^) Notice that NOT all links of a document should be inside a element. This element is intended only for major block of navigation links.
University of Malakand
Departments | Faculty | Administration
Element
■ The element defines a section in a document.
■ According to W3C's HTML5 documentation: “A section is a
thematic grouping of content, typically with a heading.”
Element
■ The element defines some content
aside from the content it is placed in (like a
sidebar).
■ The aside content should be related to the
surrounding content.
News
1.
2.
3.
A simple Home Page
University of Malakand
Departments | Facul ty | Administration
News
1. NCEAC Visit in May
2. Exam in Next Week
3. Workshop on Professional Behavior