Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 4a Block Level Elements In HTML Instructor: Muhammad Zeeshan Haider Ali Blog.

Slides:



Advertisements
Similar presentations
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Advertisements

Very quick intro HTML and CSS. Sample html A Web Title.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
Unit 20 - Client Side Customisation of Web Pages
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
4.01 Cascading Style Sheets
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
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".
ITP 104.  While you can do things like this:  Better to use styles instead:
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
HTML and CSS- Layout. HTML Layout Frame Table – Block HTML5 layout elements.
CSS Netcentric. What is CSS O CSS stands for Cascading Style Sheets O Styles define how to display HTML elements O Styles were added to HTML 4.0 to solve.
 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.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
Part 4 Introduction to CSS. CSS Table Table Borders table, td, th { border:1px solid black; } Firstname Lastname Bader Ali Paul Manuel The example below.
WRA HTML & CSS – BUILDING WEBPAGES. TODAY’S AGENDA Review: external stylesheets Review: transforming a list Intro: the object Intro: the.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB.
تقنيات الإنترنت وبرمجة الويب “ العملي “ أ. غادة الرواشدة 1 CSS Cascading Style Sheets.
CONTROLLING Page layout
04 – CSS Informatics Department Parahyangan Catholic University.
Simple Website Layout Tutorial Using HTML 5 and CSS 3 Ref: layout-tutorial-html-5-css-3/
Chapter 1: Intro to HTML Section 1: HTML Structure Presentation Section 2: Layout of an HTML File Section 3: Working with Lists & Tables Section 4: HTML.
Ch. 2. HTML 1. HTML? 2  Tim Berner-Lee first proposed (1981) and coded (1991)  HTML: HyperText Markup Language  Web browser 용  W3C (World Wide Web.
HTML Help book. HTML HTML is the programming language used to make web pages for the Internet. HTML stands for Hyper Text Markup Language. HTML is made.
HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,
IS1500: Introduction to Web Development
CCT260H - Christopher Evan Jones
CSS Box Model.
Web Development & Design Foundations with XHTML
4.01 Cascading Style Sheets
( Cascading style sheet )
Web System & Technology Course Code:CS-241 Credit Hours (3+1) Lab 7 HTML Multimedia Instructor: Muhammad Zeeshan Haider Ali Blog Address:
Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 2 HTML TABLES Instructor: Muhammad Zeeshan Haider Ali Blog Address:
Semester - Review.
Responsive
Google fonts CSS box model
CSS Layouts: Grouping Elements
HyperText Markup Language
Webpage layout using CSS
HTML Lab 5 10/1/2015.
Presentation of HTML,DHTML,XHTML
Box model.
Cascading Style Sheets (Layout)
Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 1 Introduction to Markup Language HTML Instructor: Muhammad Zeeshan Haider.
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.
2017, Fall Pusan National University Ki-Joune Li
Laying out a website using CSS and HTML
HTML A brief introduction HTML.
CSS Box Model.
DynamicHTML Cascading Style Sheet Internet Technology.
CMPE 280 Web UI Design and Development September 4 Class Meeting
Basic HTML and Embed Codes
Grids, Floats & Flex Boxes
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.
DynamicHTML Cascading Style Sheet Internet Technology.
CMPE 280 Web UI Design and Development February 7 Class Meeting
HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.
Web Development & Design Foundations with XHTML
CSS and Class Tools.
Principles of Web Design 5th Edition
Laying out Elements with CSS
4.01 Cascading Style Sheets
CSS Box Model.
CSS Box Model.
CMPE 280 Web UI Design and Development September 5 Class Meeting
CGS 3066: Web Programming and Design Fall 2019 CSS Extra
Presentation transcript:

Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 4a Block Level Elements In HTML Instructor: Muhammad Zeeshan Haider Ali Blog Address: https://zeeshanaliatisp.files.wordpress.com

Hyper Text Markup Language

Block-level Elements A block-level element always starts on a new line and takes up the full width available The <div> element is a block-level element. Examples of block-level elements: <div> <h1> - <h6> <p> <form>

Inline Elements An inline element does not start on a new line and only takes up as much width as necessary. This is an inline <span> element inside a paragraph. Examples of inline elements: <span> <a> <img>

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.

Example Div <!DOCTYPE html> <html> <body> <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> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> </body> </html> Example Div

Output

The <span> Element The <span> element is an inline element that is often used as a container for some text. The <span> element has no required attributes, but style and class are common.

Example Span <!DOCTYPE html> <html> <body> <h1>My <span style="color:red">Important</span> Heading</h1> </body> </html>

Output

Classing Block Elements <!DOCTYPE html> <html> <head> <style> div.cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <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> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> Classing Block Elements

<h2>Paris</h2> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> <p>Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the région parisienne.</p> <p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p> </div> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> <p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p> <p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p> </body> </html>

Output

Layout <!DOCTYPE html> <html> <head> <style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; #section { width:350px; padding:10px; #footer { clear:both; </style> </head> <body> Layout

<div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> <div id="section"> <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> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. <div id="footer"> Copyright © W3Schools.com </body> </html>

Output

 Responsive Web Design

<!DOCTYPE html> <html lang="en-us"> <head> <style> .city {     float: left;     margin: 5px;     padding: 15px;     width: 300px;     height: 300px;     border: 1px solid black; }  </style> </head> <body> <h1>Responsive Web Design Demo</h1> <div class="city">   <h2>London</h2>   <p>London is the capital city of England.</p>   <p>It is the most populous city in the United Kingdom,   with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="city">   <h2>Paris</h2>   <p>Paris is the capital of France.</p>    <p>The Paris area is one of the largest population centers in Europe,   with more than 12 million inhabitants.</p> </div> <div class="city">   <h2>Tokyo</h2>   <p>Tokyo is the capital of Japan.</p>   <p>It is the center of the Greater Tokyo Area,   and the most populous metropolitan area in the world.</p> </div> </body> </html> Example

Output

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 <!DOCTYPE html> <html> <body> <iframe src="demo_iframe.htm" style="border:none"></iframe> </body> </html>

Output