Web Design

WEB PAGE
STRUCTURE - HTML + STYLE - CSS
Modern web design follows the In modern web design the

so-called box-model design appearance of any content in the
page is defined by its style
box-model: Anything that is shown in
a web page should be the content of a Style is the “format” (called
rectangular/square box (or block) “propriety”) applied to either a
which can be either visible or invisible box or to its content
Content 1) picture propriety can be: 1) color

can be: 2) text 2) font
3) one or more text-paragraph 3) size
4) video 4) position
5) list 5) animation
6) another box 6) and more…..
7) other graphics
The style is defined by a set of css
Boxes and their content are defined by proprieties written either into a text file
HTML (markup language) TAGS written whose name must be
into a text file Filename.css
whose name must be or directly inside the html file
Filename.html
HTML FILE
Any file can be a web page as long as its filename extension is .html. The browser
interprets the html tags (sequentially by default) and creates the page.
A html file is divided into two sections: the HEAD and the BODY. They are defined by
two tags: <head> and <body>. In addition, every html file needs two specific tags: <!
doctype html> and <html>. So, the structure of any html file is:
<!doctype html>
<html> The tag html is a block tag and it represents the entire document
<head>
The head has some specific tags that provides information to
the browser but are not shown in the page
</head>
<body>
The tag body is a block tag and it represents the entire page (as
a box) visible on the screen. It will contain all the tags that make
up the entire web page
</body>
</html>
LET’S CREATE YOUR FIRST HTML FILE WITH KOMODO EDIT
When you run Komodo for the first time
you should see the screen on the left.
If you get a different screen click “cancel”
and, after that, Komodo should start as in
the picture.
If the main menu at the top of page is not there, then:
Press the “Alt” key on the keyboard
Select “View”  “Toolbars”
click “Show Menubar”
The top menu-item says “New file”.

That’s the one you want to click
After that, you should see the new file

with the default name Text-1.txt opened,
and the screen completely empty and
ready to have some lines of content
The next thing to do is to “Save As…” the

file and make it a web page by giving it a
name (any) and the extension .html
LET’S CREATE YOUR FIRST HTML FILE WITH KOMODO EDIT
Now you should see the new filename

instead of text-1.txt
In the picture the filename is “test.html”
Above the prompt you should see the

“path” for that file (obviously, different
from the one in the picture)
<!doctype html>
Now you are ready to write HTML code in
<html>
the html file.
<head> The first thing to do is to prepare the
</head> general standard structure for the web
page by writing the few tags you see on
<body> the left.
</body> When finished save the file
</html>
HTML TAGS
A TAG tells the browser what content is to be inserted in the page (box, text, picture, etc)
Each content shown in the page needs its own tag – most tags are block tags (the browser
places the tag’s content as a box after the previous box), a few tags are inline tags (the
browser places the tag’s content in the same line next to another element)
A TAG must be opened and (in most cases) it must be closed
<tagname> Opening tag

TAG CONTENT (picture, text, text-paragraph, video etc.)
</tagname> Closing tag
There are many different tags, but only a few are important in the
definition of the design of a web page – these are:
<p> - to organize some text into a paragraph – block tag
<img> - to place a picture – no need to close it – inline tag
<ol> and <ul> - to create a list (ordered or unordered) – block tag
<li> - to make some content an item of the (above) list tag – inline tag
<h1> <h2> … <h6> - to make a heading (text is bold and sized – h1 for the
biggest size, h6 for the smallest size – block tag
<a> - content inside this tag becomes a clickable hyperlink – inline tag
But there are many more……..
HTML TAGS
So, many tags define their content as a box. However, in order to organize the
arrangement of the page content in a specific way there is a tag which is used
mostly as a box “container” for all the other tags, including itself (that is, a box can
be placed inside another box).
This is the most important tag – the tag div – and it is used to arrange
simple content or other boxes in a specific position within the page
< div> Opening div
Some CONTENT (picture, text, text-paragraph, video, box, etc.)
</div> Closing div
The structure above defines a div box inside which there can be
any other content, that is, any number of different tags (for pictures,
paragraphs, lists, etc) as well as other div tags
EXAMPLES
< div> Opening div

< div> Opening div
Some content of the inner div
</div> Closing div
</div> Closing div
< div> Opening div

< div> Opening div
Some content of the inner div
</div> Closing div
< p> Opening p
Some content of the inner paragraph
</p> Closing p
</div> Closing div
EXAMPLES
< div>
< div>
< p>
Some text content inside the paragraph
</p>
</div>
< div>
< div>
Some content inside the yellow div
</div>
</div>
< div>
< div>
<img> an image inside the purple div
</div>
< div>
<p>……<a>………</a> ……………………… </p>
</div>
</div>
</div>
TAGS’ ATTRIBUTES
A tag can have one or more attributes which are necessary to give needed
information to the browser.
The attribute is inserted inside the opening tag with the syntax:
Attribute-name = value
For example, the tag <img> inserts an image in the page; what image? Or
better, what file? In order to tell the browser what file is to be used, the
attribute src (short for source) is used
<img src=“filename.jpg”> The jpeg picture filename.jpg is inserted in the page
Every tag has a number of specific attributes that can be used:
<a href=“filename.html”> What follows the tag a will open the page filename.html
when clicked
<img src=“filename.jpg” width=“200”> The jpeg picture filename.jpg is inserted in the page
with a width of 200px
<div id=“idname”> The div has an identity and it can be referred to as idname
TAGS’ ATTRIBUTES
There are two particularly important attributes:
The attribute id - id = “idname”

The attribute class - class =
“classname”
The attribute id gives a tag a specific unique name. That name can be used in
css instead of the tagname. NO OTHER TAG CAN HAVE THE SAME ID NAME
The attribute class gives a tag a specific name. That name can be used in css
instead of thetotagname.
It is important MANY
understand TAGS
that the CAN
style HAVE
in css THE SAME
is applied CLASS NAME
to a particular element
which is defined by its tag. However, if a particular style is applied, for example, to a div
tag, then all divs in the page will get the same style.
If this is not what you want, both the id and the class attributes provide a way for you
to be able to distinguish a tag from another one with the same tagname (all the divs in
the page, for example) when applying the style
To achieve that you will apply the style to the idname or to the classname instead of
applying it to the tagname
STYLE PROPRIETIES
CSS proprieties are used to set the appearance of a box or of its content. A propriety tells the
browser how (with which style) a specific tag or a set of tags is to appear in the page.
By using a tagname, or an idname or a classname you identify a specific tag
When the same classname is the attribute of many tags, then by using a classname you
identify a set of tags
The syntax is the following:

tagname { #idname {
propriety: value; propriety: value;
propriety: value; Any list of proprieties
propriety: value; propriety: value;
……… ………
} }
.classname {
propriety: value;
propriety: value;
………
}
STYLE PROPRIETIES
CSS proprieties are used to set the appearance of a box or of its content. A propriety tells the
browser how (with which style) a specific tag or a set of tags is to appear in the page.
By using a tagname, or an idname or a classname you identify a specific tag
When the same classname is the attribute of many tags, then by using a classname you
identify a set of tags
3 examples are the following:
(1)
The p identifies a tagname
p{
(2)
color: red;
#box {
border: solid green;
width: 500px;
width: 60%; The # identifies box as an
height: 200px;
font-weight: bold; idname (not a tagname)
background-color: green;
}
The . identifies title as a
padding: 50px;
classname (not a tagname) margin-left; 20px;
}
(3)
.title { (1) The style is applied to all p tags in the document
font-size: 150%; (2) The style is applied to the only tag in the document with
text-align: center; attribute id = “box”
line-height: double; (3) The style is applied to all tags in the document with
} attribute class = “title”
STYLE PROPRIETIES
more examples:
(1) (2)
p, h1, div { #box p {
color: red; width: 500px;
border: solid green; height: 200px;
width: 60%; background-color: green;
font-weight: bold; padding: 50px;
} margin-left; 20px;
}
(3) (4)
.title, #box { h1, h2 {
font-size: 150%; color: red;
text-align: center; }
line-height: double;
} h2 {
text-align: center;
}
(1) The style is applied to all the p, all the h1, and all the div tags in the document
(2) The style is applied to all the p tags inside the only tag in the document with id = box
(3) The style is applied to all the tags in the document with class = title and to the only tag in the
document with id = box
(4) The text color is red in all the h1 and h2 tags, the text is centered only in all the h2 tags
STYLE PROPRIETIES
There lots of different proprieties.
Each propriety can have one or more different values
Examples
width - to set the width of a box - the width is set in 2 main ways:
pixels (px) width: 500px; fixed width
Percentage (%) width: 60%; flexible width (60% of the width of the containing box)
height - to set the height of a box - the height is set in 2 ways

pixels (px) height : 200px; fixed height
As a flexible table cell display: table; flexible height (adjusted to the box’s content)
font proprieties - to give a specific font to some text content

what font? font-family: Helvetica, Courier, Verdana; 3 alternatives given
what size? font-size: 150%; size will be 1.5 times the default size
what style? font-style: italic;
What weight? font-weight: bold;
padding- to set some space between box’s content and box’s edges
Normally in pixels (px) padding-left: 10px; 10px space to the left of the box’s content
padding-right: 10px; 10px space to the right of the box’s content
padding-bottom: 10px; 10px space below the bottom of the box’s content
padding-top: 10px; 10px space above the top of the box’s content
padding: 10px; 10px space to all 4 sides of the box’s content
STYLE PROPRIETIES
There lots of different proprieties.
Each propriety can have one or more different values
Examples
color - to set the color of some text content – in general there are 2 ways to specify a color
use a name color: red; limited number of color-names
use a code color: A4BB78; billions of colors
background proprieties - to set the background of a box

background color background-color: AA66D3;
background image background-image : url(‘filename.jpg’);
text-align- to set the alignment of some text content

center text-align: center;
left (default) text-align: left; or right, or justify
border- to give a visible border to a box

in pixels (px) - default is 2px – you must indicate the style - typically you give style color and thickness
border: solid red 1px; a solid red thin border all around the box
Use border-left, border-right, border-bottom, border-top to give only the specific border to the box
margin - to set some space between boxes

in pixels (px) or % margin-left: 10px; 10px space to the left of the box
margin-right: 10px; 10px space to the right of the box
margin-bottom: 10px; 10px space below the box
margin-top: 10px; 10px space above the box
margin: 10px; 10px space to all 4 sides of the box

Web Design

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design

Uploaded by

Copyright:

Available Formats

WEB PAGE

STRUCTURE - HTML + STYLE - CSS

Modern web design follows the In modern web design the

Content 1) picture propriety can be: 1) color

The top menu-item says “New file”.

After that, you should see the new file

The next thing to do is to “Save As…” the

Now you should see the new filename

Above the prompt you should see the

<tagname> Opening tag

< div> Opening div

</div> Closing div

< div> Opening div

Every tag has a number of specific attributes that can be used:

The attribute id - id = “idname”

By using a tagname, or an idname or a classname you identify a specific tag

The syntax is the following:

By using a tagname, or an idname or a classname you identify a specific tag

height - to set the height of a box - the height is set in 2 ways

font proprieties - to give a specific font to some text content

background proprieties - to set the background of a box

text-align- to set the alignment of some text content

border- to give a visible border to a box

margin - to set some space between boxes

You might also like