SE321
Lecture 3: HyperText
Markup Language (HTML)
SK. Fazlee Rabby
Lecturer
Department of Software Engineering
Daffodil International University
Architecture of Webapges
HTML
Architecture of Webpages
CSS
Architecture of Webpages
JS
Editing and Running HTML, CSS,
JS
Text Editor: You can use whatever you want. We
recommend Sublime Text 3.
Browser: HTML, CSS and JS code can be rendered using
any Web Browser. We will be using Google Chrome
browser for running and debugging HTML, CSS and JS
Codes.
How do web pages work?
Web pages are written in a markup language called
HTML, so browsers display a web page by reading and
interpreting its HTML.
How do web pages work?
The HTML file might link to other resources, like images,
videos, as well as JavaScript and CSS (stylesheet) files,
which the browser then also loads.
What is HTML?
HTML (Hypertext Markup Language)
- Describes the content and structure of a web page; not
a programming language.
- Made up of building blocks called elements.
Basic HTML page structure
HTML elements
An element usually has start and ending tags (<p> and
</p>)
content: stuff in between start and end tags
An element can be self-closing (img)
An element can have attributes (src="puppy.jpg")
Elements can contain other elements (p contains em and
img)
Some HTML elements
To Be Placed Within <body>
LET’S PRACTICE
WOW ! TEACH ME MORE SENSEI !
W3C
HTML Forms
Browser-to-Server Communication
HTML Forms
Form Attributes
HTML Form tag can contain several common attributes for declaring methods,
actions etc.
The Action Attribute: The action attribute defines where the action is to be
performed when the form is submitted. Usually, the form data is sent to a file
on the server when the user clicks on the submit button.
In the example below, the form data is sent to a file called "action_page.php".
This file contains a server-side script that handles the form data.
Form Attributes
The Method Attribute: The method attribute specifies the HTTP method to
be used when submitting the form data. The form-data can be sent as URL
variables (with method="get") or as HTTP post transaction (with
method="post").
The default HTTP method when submitting form data is GET.
Form Attributes
The Autocomplete Attribute: The autocomplete attribute specifies whether
a form should have autocomplete on or off. When autocomplete is on, the
browser automatically complete values based on values that the user has
entered before.
Form Attributes
The Enctype Attribute: The enctype attribute specifies how the form-data
should be encoded when submitting it to the server.
Note: The enctype attribute can be used only if method="post".
Form Input Elements
The <input> Element: One of the most used form element is the <input>
element. The <input> element can be displayed in several ways, depending on
the type attribute.
More
Form Input Elements
The <select> Element: The <select> element defines a drop-down list.
Form Input Elements
The <textarea> Element: The <textarea> element defines a multi-line input
field (a text area).
Every beginner CSS tutorial makes CSS
look trivially easy
But then when you try to write CSS,
literally nothing works
Q: Why is HTML/CSS
So Bizarre??
A: There is one crucial
set of rules That We
Need to Learn
Block vs Inline display
What is HTML?
HTML (Hypertext Markup Language)
- Describes the content and structure of a web page
- Made up of building blocks called elements.
There are 3 basic types
Types of HTML Elements
Each HTML element is categorized by the HTML spec into one of
three-ish categories:
1. Block: Large blocks of content, has height and width.
Ex.: <p>, <h1>, <blockquote>, <ol>, <ul>, <table>
2. Inline: Small amount of content, no height or width
Ex.: <a>, <em>, <strong>,<br>
a. Inline Block: Inline content with height and width
3. Metadata: information about the page, usually not visible
Block Elements
Examples:
<p>, <h1>, <blockquote>, <ol>, <ul>, <table>
Take up the full width of the page
(flows top to bottom)
Have a height and width
Can have block or inline elements
as children
Block Elements
<h1> is block-level, so it
extends the full width of the
page by default
Note how block-level
elements (h1, p) flow top to
bottom
Block Elements
<h1> is block-level, so its
width can be modified
Block-level elements still flow
top to bottom
Inline Elements
Examples:
<a>, <em>, <strong>, <br>
Take up only as much width as
needed (flows left to right)
Cannot have height and width
Cannot have a block element child
Cannot be positioned (i.e. CSS
properties like float and position do
not apply to inline elements)
o Must position its containing
block element instead
Inline Elements
Cannot set width on inline element, so it is ignored
Inline-Block Elements
Examples:
<img>, any element with display: inline-block;
Take up only as much width as
needed (flows left to right)
Can have height and width
Can have a block element child
Can be positioned (i.e. CSS
properties like float and position do
not apply to inline elements)
Inline-Block Elements
Can set width on inline-block
element, so image width is set
to 50px.
inline-block flows left to right,
so images are right next to
each other.
Moral of The Story
If your CSS isn't working, see if you're
trying to apply block-level properties
to inline elements
