Embed Size (px)
DESCRIPTION
Learn HTML and CSS in few steps . Practice an hour daily for good results in 10 days. Here I am mentioning basic elements , attributes and tags of HTML with styling them
Citation preview
WHY HTML
To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language).
WHAT IS THE WWW?
A distributed document delivery system Uses a client-server model Main presentation language is HTML URL – Uniform Resource Locator. Browser – A software program which is
used to show web pages. Pages end with “.htm” or “.html”
HTML WORK ON CLIENT-SERVER MODEL
Two processes (possibly networked): The client
Sends requests to the server Blocks until reply is received
The server Processes requests from clients Never blocks Can reply to several clients simultaneously
WHAT IS HTML?
HTML stands for Hyper Text Markup Language HTML is a markup language HTML is used to create web documents including
text, images, formatting, and hyperlinks to other documents.
A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain
text HTML documents are also called web pages
USES OF HTML
Publish online documents with headings, texts, tables, lists, photos, etc.
Retrieve online information via hypertexts links. Design forms for conducting transactions with
remote services, for use in searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
HTML VERSIONS
HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 HTML5 2012 XHTML5 2013
MARKUP LANGUAGES
Markup: Embedded codes in documents Codes are called `tags’ Codes
Describe the structure documents Include instructions for processing
Markup language: Computer language for describing syntax of tags May be used with other tools to specify rendering
HTML (HYPER TEXT MARKUP LANGUAGE) HTML is used to create web documents including text,
images, formatting, and hyperlinks to other documents. HTML documents consists of text and ‘markup’ tags
which are used to define the structure, appearance, and function of the information.
There are two types of markup tags: Container tags – Define a section of text using a start tag and
an end tag. For example, text placed inside of these tags would appear in bold:
<B>Hello</B> Empty tags – represent a single occurrence of an instruction.
For example, the <BR> or break tag is used to indicate that you want to include a single space following the text.
EXAMPLE OF AN HTML DOCUMENT
<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
WHAT EXAMPLE TELLS
The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
STRUCTURE OF AN HTML DOCUMENT
An HTML document is divided into two main sections:
Heading - The HEADing contains information describing the document, such as its title. The heading section is indicated by the <HEAD> and </HEAD> tags.
Body - The BODY section is where the Web document text, graphics, and other elements are placed. The body section is indicated by the <BODY> and </BODY> tags.
TEXT AUTHORING TOOLS
HTML Editor – A word processor that has been specialized to make the writing of HTML documents more effortless.
The most commonly used text editors are:
Notepad (Windows) WordPad (Windows) Simpletext (Macintosh) Adobe Dreamweaver (All)
HTML TAGS
HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by
angle brackets like <html> HTML tags normally come in pairs like <b> and
</b> 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, with a
forward slash before the tag name Start and end tags are also called opening tags
and closing tags
HTML ELEMENT SYNTAX
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes
HTML ATTRIBUTES
HTML elements can have attributes Attributes provide additional information about an
element Attributes are always specified in the start tag Attributes come in name/value pairs like:
name="value"ExampleHTML links are defined with the <a> tag. The link address is specified in the href attribute:<a href="http://www.example.com">This is a link</a>
THE HTML <HEAD> ELEMENT
The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The <title> tag defines the title of the document. The <title> element is required in all HTML/XHTML
documents. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results
HTML ATTRIBUTES
class Specifies one or more class names for an element (refers to a class in a style sheet)
id Specifies a unique id for an element style Specifies an inline CSS style
for an element title Specifies extra information
about an element (displayed as a tool tip)
HTML HEADINGS
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Exmaple <h1>This is a heading</h1>
<h2>This is a heading</h2><h3>This is a heading</h3>
HEADINGS ARE IMPORTANT
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
HTML LINES
The <hr>tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example <p>This is a paragraph.</p>
<hr><p>This is a paragraph.</p><hr><p>This is a paragraph.</p>
HTML COMMENTS
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:
<!-- This is a comment -->
HTML PARAGRAPHS & LINE BREAKS
Paragraphs are defined with the <p> tag.
Example<p>This is a paragraph</p><p>This is another paragraph</p> Use the <br> tag if you want a line
break (a new line) without starting a new paragraph:
<p>This is<br>a para<br>graph with line breaks</p>
HTML TEXT FORMATTING
<b> Defines bold text <em> Defines emphasized text <i> Defines a part of text in an alternate voice or
mood <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del>Defines deleted text <mark> Defines marked/highlighted text
HTML COLORS
Colors are displayed combining RED, GREEN, and BLUE light.
The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).
HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).
The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF).
HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.
HTML COLORS
HTML HYPERLINKS (LINKS)
The HTML <a> tag defines a hyperlink.A hyperlink (or link) is a word, group of words, or image
that you can click on to jump to another document.When you move the cursor over a link in a Web page,
the arrow will turn into a little hand.The most important attribute of the <a> element is the
href attribute, which indicates the link’s destination.By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
<a href="url">Link text</a>
HTML LINKS
The target Attribute The target attribute specifies where to
open the linked document. The example below will open the linked
document in a new browser window or a new tab:
<a href="http://www.abc.com/" target="_blank">abc!</a>
HTML LINKS
The id Attribute The id attribute can be used to create a
bookmark inside an HTML document. Tip: Bookmarks are not displayed in any
special way. They are invisible to the reader.<a id="tips">Useful Tips Section</a> <a href="#tips">Visit the Useful Tips
Section</a> <a href="http://www.abc.com/html_links.htm#
tips">Visit the Useful Tips Section</a>
HTML IMAGES - THE <IMG> TAG AND THE SRC ATTRIBUTE
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
<img src="url" alt="some_text">
HTML IMAGES - SET HEIGHT AND WIDTH OF AN IMAGE
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
The alt attribute provides alternative information for an image
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228
WHAT IS CSS?
CSS stands for Cascading Style Sheets Styles define how to display HTML
elements Styles were added to HTML 4.0 to
solve a problem External Style Sheets can save a lot
of work External Style Sheets are stored in CSS
files
STYLING HTML WITH CSS
CSS was introduced together with HTML 4, to provide a better way to style HTML elements.
CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML
elements Internal - using the <style> element in the
<head> section External - using an external CSS file The preferred way to add CSS to HTML, is to put
CSS syntax in separate CSS files.
CSS SYNTAX
CSS SYNTAX
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
p {color:red;text-align:center;}
INLINE STYLES
An inline style can be used if a unique style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
INTERNAL STYLE SHEET
An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:
<head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style>
</head>
EXTERNAL STYLE SHEET
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the
<link> tag. The <link> tag goes inside the <head> section:
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
CSS EXAMPLE
body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;}
CSS ID AND CLASS
The id Selector The id selector is used to specify a style for a single, unique
element. The id selector uses the id attribute of the HTML element,
and is defined with a "#". The style rule below will be applied to the element with
id="para1":Example#para1
{text-align:center;color:red;}
THE CLASS SELECTOR
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a ".“
Example.center {text-align:center;}
CSS BACKGROUND
CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
body {background-color:#b0c4de;}
CSS TEXT PROPERTIES
color Sets the color of text direction Specifies the text direction/writing 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 Controls the capitalization of text unicode-bidi 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
CSS TEXT EXAMPLES
h1 {color:#00ff00;} h1 {text-align:center;} a {text-decoration:none;} p.uppercase {text-
transform:uppercase;} p {text-indent:50px;} P {tex-shadow:0px 0px 5px inset; } P {tex-shadow:0px 0px 5px ; }
CSS FONT PROPERTIES
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text font-style Specifies the font style for
text font-variant Specifies whether or not a
text should be displayed in a small-caps font
font-weight Specifies the weight of a font
CSS FONT EXAMPLE
p{font-family:"Times New Roman", Times, serif;}
p.italic {font-style:italic;} h1 {font-size:40px;} h1 {font-size:2.5em;} h1 {font-weight:bold;} h1 {font-variant:small-caps;}
CSS LINKS
The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked All links comes in sequence a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */
CSS BOX MODEL
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.
CSS BOX MODEL
CSS BOX MODEL CONT..
Explanation of the different parts: Margin - Clears an area around the border. The margin
does not have a background color, it is completely transparent
Border - A border that goes around the padding and content. The border is affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear
WIDTH AND HEIGHT OF AN ELEMENT
The total width of the element in the example below is 300px:
.Element {width:250px; padding:10px; border:5px solid gray; margin:10px;
} Let's do the math:
250px (width)+ 20px (left + right padding)+ 10px (left + right border)+ 20px (left + right margin)= 300px
CSS BORDER
border Sets all the border properties in one declarationborder-bottom Sets all the bottom border properties in one
declaration border-bottom-color Sets the color of the bottom border border-bottom-style Sets the style of the bottom border border-bottom-width Sets the width of the bottom border border-color Sets the color of the four borders border-left Sets all the left border properties in one
declaration border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border border-right Sets all the right border properties in one
declaration
CSS BORDER CONT….border-right-color Sets the color of the right border border-right-style Sets the style of the right border border-right-width Sets the width of the right border border-style Sets the style of the four borders border-top Sets all the top border properties in
one declaration border-top-color Sets the color of the top border border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width Sets the width of the four borders
CSS BORDER CONT…border-style values:{none,dotted,dashed,solid,double,g
roove,rigid}border-style values:Color , width so Exampleborder:5px solid red;Border-bottom:5px dashed blue;
CSS OUTLINES
outline Sets all the outline properties in one declaration
outline-color Sets the color of an outline outline-style Sets the style of an outline
none
outline-width Sets the width of an outline thin
CSS MARGIN
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
CSS MARGIN CONT….
Margin - Individual sides margin-top:100px;
margin-bottom:100px;margin-right:50px;margin-left:50px;
Margin - Shorthand propertymargin:100px(T) 50px® 20PX(B) 10PX(L);
CSS PADDING
Padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
CSS PADDING CONT….Padding - Individual sides
padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;
Padding - Shorthand propertypadding:25px(t) 50px® 40px(b) 60px(L);
CSS DISPLAY AND VISIBILITY
Hiding an Element - display:none or visibility:hidden
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
h1.hidden {visibility:hidden;}h1.hidden {display:none;}
CSS POSITIONING
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method
CSS POSITIONING PROPERTIES
bottom Sets the bottom margin edge for a positioned box
clip Clips an absolutely positioned elementcursor Specifies the type of cursor to be
displayedleft Sets the left margin edge for a positioned
boxoverflow
Specifies what happens if content overflows an element's box
CSS POSITIONING PROPERTIES
position Specifies the type of positioning for an element (absolute,fixed,relative,static,inherit)
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box
z-index Sets the stack order of an element
CSS FLOAT
Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:
HTML TABLES
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
TABLE EXAMPLE
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
THE HTML <DIV> ELEMENT
The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.
The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.
When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.
Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.
<div>content</div>
THE HTML <SPAN> ELEMENT
The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning. When used together with CSS, the <span>
element can be used to set style attributes to parts of the text.
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
HTML FORMS
HTML forms are used to pass data to a server. An HTML form can contain input elements like text
fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The Input Element <form>
First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>
FORMS CONT…
Password FieldPassword: <input type="password" name="pwd">Radio Buttons<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">FemaleCheckboxes<input type="checkbox" name="vehicle" value="Bike">I
have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car
Submit Button<input type="submit" value="Submit">
HTML LISTS
HTML Unordered Lists An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag. The list items are marked with bullets
(typically small black circles).<ul><li>Coffee</li><li>Milk</li></ul>
LIST CONT…
HTML Ordered Lists An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag. The list items are marked with
numbers.<ol><li>Coffee</li><li>Milk</li></ol>
LISTS CONT…
A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines
terms/names) and <dd> (describes each term/name): <dl>
<dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
![[Wiley] learn html and css - [w3 schools]](https://img.pdfslide.net/doc/110x75/58abea511a28ab504e8b5259/wiley-learn-html-and-css-w3-schools.jpg)
