Programming Language (HTML & CSS)

 

HTML & CSS

TABLE OF CONTENTS CONTENT

CHAPTER CHAPTER 1

INTRODUCTION

PAGE 1

CHAPTER 2

WHAT IS HTML?

3

2.1 HTML Tags 2.2 Web Browsers

4 5

2.3 2.4 2.5 2.6

HTML Page Structure The DOCTYPE > Declaration Common Declaration HTML Editor

6 6 7 7

HTML Functions

10

HTML Basic Examples HTML Documents HTML Headings HTML Paragraph HTML Links HTML Images HTML Text Size HTML Example Explained

10 11 11 11 12 12 12 12

3.9 3.10 3.11 3.12 3.13 3.14

HTML Tag Elements HTML Reference HTML Styling HTML Style Attribute Attribute HTML Text Color HTML Font

13 15 16 16 16 17

CHAPTER 4

LINKING WITH PAGES

18

CHAPTER 5

CSS

21

CSS Introduction Introduction CSS Syntax CSS Selector The id Selector The Class Selector Grouping Selectors Exercise

21 22 22 23 23 24 25

CHAPTER 3

3.1 3.2 3.3 3.4 35. 3.6 3.7 3.8

5.1 5.2 5.3 5.4 5.5 5.6 5.7

CHAPTER 6  CSS DECORATION

6.1 6.2 6.3 6.4 6.5 6.6

Insert functions CSS Background Background Image Set position and no-repeat CSS Text Color Text Alignment

27

27 30 31 32 34 35

i 

 

HTML & CSS

6.7 6.8 6.9 6.10 6.11 6.12 6.13 6.14

Text Decoration Decoration Text Transformation Text Indentation All CSS Properties Properties CSS Font CSS Font Families Font Style Create Tables

36 37 37 38 39 39 40 46

ii  ii 

 

HTML & CSS

CHAPTER 1

INTRODUCTION INTRODUCT ION

In this book, we will learn about HTML and CSS, and it’s the fundamental of web design

and web development. This book will divide HTML and CSS into two parts that we will

discuss each of them in separately. In this chapter, we will look into what can HTML and CSS can do, and how it can change the design of a static website into a stunning and colorful website.

What HTML can do?

HTML works as a framework of a website, it creates a frame for a website, the most basic of every web page. The browser is the tool that will assist HTML to present it’s readability. Of course, a basic website will look plain without any a touch up.

Webpage with HTML only

In the above image, it looks very plain and hard to read, this is a plain HTML page. We need something to cheer up the web page; therefore, we need CSS to create a better and presentable website.

1 

 

HTML & CSS

With the help of CSS, HTML added a brand new look

As seen as above, we can identify the difference between HTML and HTML with CSS. HTML without CSS is plain and hard to read, but with CSS, it looks a lot better to read and also added lively atmosphere atmosphere to the webpage. Cool, Cool, right?

In the next chapter, we will go into the HTML and describe what HTML is and how we can create a website from scratch with a note editor only.

Exercise:

1) 1)   Go to the internet and find a plain HTML page. 2) 2)   Go to the internet and find pages of HTML and CSS.

2 

 

HTML & CSS

CHAPTER 2

WHAT IS HTML?

HTML is the acronym of Hyper Text Markup Language, so in short we can describe it in a more precise detail:  

HTML stands for Hyper Text Markup Language

 

A markup language is a set of markup tags 

 

HTML documents are described by HTML tags 

 

Each HTML tag describes different  d ifferent document content









It is strictly stated as a non-programming language, as we can see here, it is a markup language that marks up the webpage, there’s no functions or classes in here. Therefore,

it’s more like a design tool than a programming language. l anguage. 

Now, this is a simple HTML document which brings you for a simple introduction:

html >  >  >  title> >Page Title< Title >    > 

h1> >My First Heading< Heading >   

/body> >   

Above is a simple HTML document As above, we can see that HTML always starts with tags, , and the DOCTYPE  declaration defines the document type to be HTML.

3 

 

HTML & CSS You can always try it yourself if you go to the website of w3school http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default . You will be able to read directly from the editor.

There is DOCTYPE that we mentioned before and it defines the document type of HTML.

So these are the example of DOCTYPE:   The text between  and  describes an HTML document



  The text between  and  provides information about the document



  The text between  and  provides a title for the document



  The text between  and  describes the visible page content



  The text between  and  describes a heading



  The text between  and  describes a paragraph



2.1

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets: >content content< >   

HTML tags normally come in pairs like and

 

The first tag in a pair is the start tag, the second tag is the end tag 

 

The end tag is written like the start tag, but with a slash before the tag name

 

The start tag is often called the opening tag. The end tag is often called the closing









tag.

4 

 

HTML & CSS

2.2

Web Browsers

The purpose of a web browser (Chrome, IE, Firefox, Safari, Opera) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document:

A browser (Google Chrome) display HTML

5 

 

HTML & CSS

2.3

HTML Page Structure

Below is a visualization of an HTML page structure:  structure: 

Only the area (the white area) is displayed by the browser.  

2.4

The Declaration

The declaration helps the browser to display a web page correctly.

There are different document types on the web. To display a document correctly, the browser must know both type and version. The doctype declaration is not case sensitive. All cases are acceptable: html >  HTML>  html>  !Doctype  Html> Html > 

XHTML 1.0 l.dtd">

2.6

HTML Editor

HTML can be edited with standard text editing software, this included:   Notepad for Windows



  TextEdit for Mac



  TextWrangler



  Notepad ++



  Dreamweaver



There are step-by-step manual to write and display HTML and below shows 4 steps to get this done:

Step 1: Open Notepad To open Notepad in Windows 7 or earlier:

Click Start (bott (bottom om

left

on

your

screen).

Click All

Programs.

Click Accessories.

Click Notepad. To open Notepad in Windows 8 or later: Open the Start Screen (the window wi ndow symbol at the bottom left l eft on your screen). scr een). Type Notepad.

7 

 

HTML & CSS

Step 2: Write Some HTML   Write or copy some HTML into Notepad. html >  >  > 

>My First Heading< Heading > 

My first paragraph.< paragraph. > 

/body> > 

8 

 

HTML & CSS Step 3: Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" or any other name ending with htm. UTF-8 is the preferred encoding for HTML files. ANSI encoding covers US and Western European characters only.

Step 4: View HTML Page in Your Browser Open the saved HTML file in your favorite browser. browser. The result will llook ook much like this:

9 

 

HTML & CSS

CHAPTER 3 3.1

HTML Functions Function s

HTML Basic Examples

HTML Elements HTML elements are written with a start tag, with an end tag, with the content in between:

>content content< > The HTML element is everything from the start tag to the end tag:

My first HTML paragraph.< paragraph. >

Start tag

Element content

End tag



My First Heading





My first paragraph.





Go to next line

10  10 

 

HTML & CSS

3.2

HTML Documents

All HTML documents must start with a type declaration: . The HTML document itself begins with  and ends with . The visible part of the HTML document d ocument is between  and . Example: html >

>  >  h1> >My First Heading< Heading >    /body> > 

3.3

HTML Headings

HTML headings are defined with the  to  tags, Example: >This is a heading< heading >  >This is a heading< heading >  >This is a heading< heading > 

3.4

HTML Paragraph

HTML paragraphs are defined with the  tag:

This is a paragraph. This is another paragraph.

11  11 

 

HTML & CSS

3.5

HTML Links

With the HTML link defined, the line l ine of words will be linked with the website desired if clicked. HTML links are defined with the  tag: This is a link  >

The link address is specified in the href attribute. Attributes are used to provide additional information about HTML elements.

3.6 

HTML Images

HTML images are defined with the  tag. The source file (src), alternative text (alt), and size (width and height) are provided as attributes: Example: img  src= src="w3schools.jpg" "w3schools.jpg"  alt= alt="W3Schools.com" "W3Schools.com"  width= width="104" "104"  height="142" height="142"> > This is a heading< heading >  >This is a paragraph.< paragraph. > 

12  12 

 

HTML & CSS

3.8

HTML Example Explained

The  element defines the whole document.

It has a start tag and an end tag . The element content is another HTML element (the element). >  >  h1> >My First Heading< Heading >    /body> >    The  element defines the document body. It has a start tag and an end tag . The element content is two other HTML elements ( and ). >  >My First Heading< Heading >  My first paragraph.< paragraph. >  >

3.9

HTML Elements

3.9.1 The href Attribute  HTML links are defined with the  tag. The link address is specified in the href attribute: Example: This is a link  >

13  13 

 

HTML & CSS 3.9.2 Size Attributes HTML images are defined with the  tag. The filename of the source ( src), and the size of the image (width and height ) are all provided as attributes: Example:

> 

3.9.3 The Alt Attribute The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed. The value of the attribute can be read by "screen readers". This way, someone "listening" to the webpage, i.e. a blind person, can "hear" the element. Example: img  src= src="w3schools.jpg" "w3schools.jpg"  alt= alt="W3Schools.com" "W3Schools.com"  width= width="104" "104"  height="142" height="142"> >  My First Heading< Heading >

3.9.5 P The  element defines a paragraph . It has a start tag and an end tag . The element content is: My first paragraph. paragraph.

My first paragraph.< paragraph. >

14  14 

 

HTML & CSS

3.10 

HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their attributes. You will learn more about HTML tags and attributes in the next chapters of this tutorial. Tag

Description



Defines an HTML document

body

Defines the document s body



Defines the document's head element

to

Defines HTML headings



Defines a horizontal line

Exercise  1) 1)   Create a HTML page with all the headers. 2) 2)   Insert , and headings. 3) 3)   Insert paragraph of “How are you yo u doing?”.  4) 4)   Insert a link that will link to  to www.google.com. www.google.com .  5) 5)   Insert an image into the page and set width and height, 300px.

15  15 

 

HTML & CSS

3.11 HTML Styling Every HTML element has a default style (background color is white and the text color is black). Changing the default style of an HTML element, can be done with the style attribute. This example changes the default background background color from white to lightgrey: Example >  >This is a heading< heading >  This is a paragraph.< paragraph. >  > 

3.12 HTML Style Attribute The HTML style attribute has the following syntax: style="property:value" The  property is a CSS property. The value is a CSS value.

3.13 HTML Text Color The color property defines the text color to be used for an HTML element: Example: >This is a heading< heading >  >This is a paragraph.< paragraph. >

16  16 

 

HTML & CSS

3.14 HTML Font The font-family property defines the font to be used for an HTML element: Example:

h1  style= style="font-family:verdana" "font-family:verdana"> >This is a heading< heading >  This is a paragraph.< paragraph. > 

Exercise From the previous HTML page, add style to the HTML. Add font style and font color.

17  17 

 

HTML & CSS

CHAPTER 4

LINKING LINKIN G WITH PAGES

Everyone may be thinking, if I have a few pages, how would I link these pages together? What should I do? With a more complicated web page, there will be more navigation to link. So, this chapter will guide you to link pages with pages. A link to Google.com: Google.com:

href="http://www.google.com"> >GOOGLE GOOGLE< > >    >

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. An example of a style sheet file called "mySty "myStyle.css", le.css", is shown below: body { background-color: lightblue; background-color:  lightblue;   }

h1 { color: navy; color:  navy;   margin-left: 20px; margin-left:  20px;   }

27  27 

 

HTML & CSS

6.1.2 Internal Style Sheet An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the element, inside the head section of an HTML page:  Example

body { background-color: linen;   background-color: linen; } h1 { color: maroon; color: maroon;   margin-left: 40px; margin-left: 40px;  

}   

6.1.3

Inline Styles

An inline style may be used to apply a unique style for a single element. An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly! To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a element: Example

>This is a heading.< heading. > 

28  28 

 

HTML & CSS 6.1.4 Multiple Style Sheets If some properties have been defined for the same selector in different style sheets, the value will be inherited from from the more specific style sheet. For example, assume that an external style sheet has the following properties for the element: h1 { color: navy; color:  navy;   margin-left: 20px; margin-left:  20px;   }

then, assume that an internal style sheet also has the following property for the element: h1 { color: orange; color:  orange;   }

If the page with the internal style sheet also links to the external style sheet the properties

for the element will be: color: orange; margin-left: 20px;

6.1.5 Multiple Styles Will Will Cascade Cascade into One Styles can be specified:  

In an external css file

 

Inside the section of an html page

 

Inside an html element







29  29 

 

HTML & CSS 6.1.6 Cascading order What style will be used when there is more than one style specified for an HTML element? Generally speaking, we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority: 1. 1.   Browser default 2. 2.   External and internal style sheets (in the head section) 3. 3.   Inline style (inside an HTML element)

6.2

CSS Background

CSS background properties are used to define the background effects of an element. CSS properties used for background effects:  

background-color

 

background-image

 

background-repeat

 

background-attachment

 

background-position











Background Color

 property specifies the background color of an element. The background-color  property The background color of a page is set like l ike this: Example body { background-color: background-color: #b0c4de;  #b0c4de;   }

30  30 

 

HTML & CSS With CSS, a color is most often specified by:  

a HEX value - like "#ff0000"

 

an RGB value - like l ike "rgb(255,0,0)"

 

a color name - like "red"







Look at CSS at CSS Color Values for a complete list of possible color v values. alues. In the example below, the , , and elements have different background colors: Example h1 { background-color: background-color: #6495ed;  #6495ed;   }

p{ background-color: #e0ffff; background-color: #e0ffff;   }

div { background-color: #b0c4de;  #b0c4de;   background-color: }

6.3

Background Image

background-image  property specifies spec ifies an image to use us e as the background of an The background-image element. By default, the image is repeated so it covers the entire element.

31  31 

 

HTML & CSS The background image for a page can be set like this: body { background-image:  url("paper.g url("paper.gif"); if");   background-image: } Below is an example of a bad combination of text and background image. The text is almost not readable: body { background-image:  url("bgdesert url("bgdesert.jpg"); .jpg");  background-image:

} Background Image - Repeat Horizontally or Vertically By default, the background-image background-image property  property repeats an image both horizontally and vertically. Some images should be repeated only horizo horizontally ntally or vertically, or they will look strange, like this:

body { background-image: url("gradient_bg.png");   background-image: url("gradient_bg.png"); }

6.4

Set position and no-repeat

Showing the image only once is specified by the background-repeat background-repeat property:  property: body { background-image: background-image:  url("img_tree url("img_tree.png"); .png");   background-repeat: background-repeat: no-repeat;  no-repeat;   }

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

32  32 

 

HTML & CSS The position of the image is specified by the background-position background-position property:  property: body { background-image:  url("img_tree url("img_tree.png"); .png");   background-image: background-repeat: background-repeat: no-repeat;  no-repeat;   top;  background-position:  right top;  }

Background - Shorthand property As you can see from the examples above, there are many properties to consider when dealing with backgrounds. backgrounds. To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property. The shorthand property for background is simply "background ": " background": body { background: #ffffff  #ffffff url("img_tree.png") no-repeat right top;  top;   background: } When using the shorthand property the order of the property values is:  

background-color

 

background-image

 

background-repeat

 

background-attachment

 

background-position











It does not matter if one of the property values is missing, as long as the ones that are present are in this order.

33 

 

HTML & CSS

6.5  CSS Text Color Text Color The color  property  property is used to set the color of the text. With CSS, a color is most often specified by:  

A HEX value - like "#ff0000"

 

An RGB value - like "rgb(255,0,0)"

 

A color name - like "red"







Look at CSS at CSS Color Values for a complete list of possible color values. v alues. The default color for a page is defined in the body selector. Example body { color: color: blue;  blue;   }

h1 { color: color: #00ff00;  #00ff00;   }

h2 { color: rgb(255,0,0);  rgb(255,0,0);   color: }

34  34 

 

HTML & CSS

6.6

Text Alignment

text-align property  property is used to set the horizontal alignment of a text. The text-align Text can be centered, or aligned to the left l eft or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). newspapers). Example

h1 { text-align: text-align: center;  center;   }

p.date { text-align: text-align: right;  right;   } p.main { text-align: text-align: justify;  justify;   }

35  35 

 

HTML & CSS

6.7

Text Decoration

text-decoration property  property is used to set or remove decorations from text. The text-decoration The text-decoration property is mostly used to remove underlines from links for design purposes: a{ text-decoration: none; text-decoration:  none;   } It can also be used to decorate text: h1 { text-decoration: overline;  overline;   text-decoration: }

h2 { text-decoration: line-through;  line-through;   text-decoration: }

h3 { text-decoration: underline;  underline;   text-decoration: }

36  36 

 

HTML & CSS

6.8

Text Transformation

The text-transform text-transform property  property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase uppercase or lowercase letters, or capitalize the first letter of each word. p.uppercase { text-transform: uppercase; text-transform: uppercase;   }

p.lowercase { text-transform: l owercase; e;   text-transform: lowercas }

p.capitalize { text-transform: text-transform: capitalize;  capitalize;   } 

6.9

Text Indentation

The text-indent text-indent property  property is used to specify the indentation of the first line of a text. Example p{ text-indent: 50px; text-indent: 50px;   }

37  37 

 

HTML & CSS

6.10 All CSS Properties Property

Description

color 

Sets the color of text

direction

Specifies the text direction/writ direction/writing ing direction

 

letter-spacing

Increases or decreases the space between characters in a text

line-height

Sets the line height

text-align

Specifies the horizontal alignment of text

text-decoration

Specifies the decoration added to text

text-indent

Specifies the indentation of the first line in a text-block

 

 

text-shadow

Specifies the shadow effect added to text

 

text-transform

 

unicode-bidi

Controls the capitalization of text Used together with the direction the direction property to set or return whether the text should be overridden to support multiple languages in the same document

vertical-align

Sets the vertical alignment of an element

white-space

Specifies how white-space inside an element is handled

word-spacing

Increases or decreases the space between words in a text

 

38  38 

 

HTML & CSS

6.11 CSS Font CSS font properties define the font family, boldness, size, and the style of a text. Difference Between Serif and Sans-serif Fonts

6.12 

CSS Font Families

In CSS, there are two types of font family names:  



Generic family - a group of font families with a similar look (like "Serif" or

"Monospace")  



Font family - a specific font family (like "Times New Roman" or "Arial")

Generic family

Font family

Description

Serif

Times New Roman

Serif fonts have

Georgia

small lines at the ends on some characters

Sans-serif

Arial

"Sans" means without - these fonts

Verdana

do not have the lines at the ends of characters

Monospace

Courier New Lucida Console

39  39 

 

HTML & CSS

6.13

Font Style

The font-style font-style property  property is mostly used to specify italic text. This property has three values:  

normal - The text is shown normally

 

italic - The text is shown in italics

 

oblique - The text is "leaning" "l eaning" (oblique is very similar to italic, but less supported)







Example p.normal { font-style: font-style: normal;  normal;   } p.italic { font-style: font-style: italic;  italic;  

} p.oblique { font-style: oblique;  oblique;   font-style: }

6.13.1 Set Font Size Value Setting the text size with pixels gives you full control over the text size: h1 { font-size: 40px;  40px;   font-size: } h2 { font-size: 30px;  30px;   font-size: } p{ font-size: 14px; font-size: 14px;   } 

40  40 

 

HTML & CSS 6.13.2 Set Font Size with EM To allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: formula: pixels/16=em Example h1 { font-size: 2.5em;  2.5em;  /* 40px/16=2.5em */ */   font-size: }

h2 { font-size: 1.875em;  1.875em;  /* 30px/16=1.875em */  */  font-size: }