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.

Slides:



Advertisements
Similar presentations
Designing Web Pages Tables part one. Using Tables for Page Layout 2.
Advertisements

Working with Web Tables
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
HTML: HyperText Markup Language Hello World Welcome to the world!
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
4.01 Cascading Style Sheets
Cascading Style Sheets – Block Level. Block Level Style So far we have done text-level CSS With block level CSS, we used a generic container tag Similarly.
CSS Box Model. What is the CSS Box Model? The “Box Model” is a tool we use to lay out our web pages in a number of individual "boxes" or "containers".
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.
HTML history, Tags, Element. HTML: HyperText Markup Language Hello World Welcome to the world!
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CHAPTER 1 HTML & HTML5 I อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Tutorial 5 Working with Tables and Columns
Tutorial 5 Working with Tables and Columns
HTML: Tables & Frames Internet Technology.
Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.
REEM ALMOTIRI Information Technology Department Majmaah University.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.
Tutorial 5 Working with Web Tables. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn and Apply the structure of.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
CSS.
Tutorial 5 Working with Web Tables
CSS Box Model.
Getting Started with CSS
CSS Box Model.
Client-Side Internet and Web Programming
CSS Box Model.
The Box Model in CSS Web Design – Sec 4-8
4.01 Cascading Style Sheets
Responsive
The Box Model in CSS Web Design – Sec 4-8
CSS Layouts: Grouping Elements
HyperText Markup Language
HTML: HyperText Markup Language
Inserting and Working with Images
Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 4a Block Level Elements In HTML Instructor: Muhammad Zeeshan Haider Ali Blog.
Intro to Dreamweaver Web Design Section 8-1
Positioning Objects with CSS and Tables
Cascading Style Sheets
Tutorial 5 Working with Tables and Columns
Cascading Style Sheets (Layout)
Client-Side Internet and Web Programming
The Box Model in CSS Web Design – Sec 4-8
HTML Images CS 1150 Spring 2017.
Tutorial 5 Working with Web Tables
CSS.
PAGE LAYOUT - 2.  The div tag equipped with CSS rules produces good looking pages.  With CSS, the div tag can easily be positioned anywhere on the page.
The Web Wizard’s Guide To DHTML and CSS
CSS Borders and Margins.
MORE Cascading Style Sheets (The Positioning Model)
CSS Box Model.
More CSS Page layout Boriana Koleva Room: C54
HTML Images CS 1150 Fall 2016.
Floating and Positioning
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
CSS.
CSS Box Model.
Lesson 5: HTML Tables.
4.01 Cascading Style Sheets
CSS Box Model.
CSS Box Model.
Positioning Objects with CSS and Tables
Positioning Boxes Using CSS
CGS 3066: Web Programming and Design Fall 2019 CSS Extra
Presentation transcript:

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). The <div> element is a block-level element. Examples of block-level elements: <div> <h1> - <h6> <p> <form>

The <div> Element The <div> element is a block-level element that is often used as a container for other HTML elements. The <div> element has no required attributes, but style and class are common. When used together with CSS, the <div> element can be used to style blocks of content: Example <div style="background-color:black; color:white; padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>

HTML Iframes An iframe is used to display a web page within a web page. Iframe Syntax The syntax for adding an iframe is: <iframe src="URL"></iframe>

Iframe - Set Height and Width Use the height and width attributes to specify the size. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). Example <iframe src="demo_iframe.htm" width="200" height="20 0"></iframe>

Iframe - Remove the Border By default, an iframe has a black border around it. To remove the border, add the style attribute and use the CSS border property: Example <iframe src="demo_iframe.htm" style="border:none"></ iframe> <iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>

Use iframe as a 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: Example <iframe src="demo_iframe.htm" name="iframe_a"></ifr ame> <p><a href="http://www.w3schools.com" target="ifram e_a">W3Schools.com</a></p>

Comments in html Comment tags <!-- and --> are used to insert comments in HTML. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> Note: There is an exclamation point (!) in the opening tag, but not in the closing tag.

&nbsp Non breaking space used to insert spaces