html & css training institute in ambala ! batra computer centre

HTML & CSS Training In Ambala

Today’s TopicsWhat is HTMLDefinitionHistoryHow it WorksBasic StructureTypes of tagsBasic tags

Ph. No. :9729666670,4000670 Website: www.batracomputercentre.com

What is CSSHow does CSS affects

HTMLTypes of CSSExplain types:

Inline StyleInternal StyleExternal Style

What is HTML• HTML stands for Hyper Text Markup

Language, which is the most widely used language on Web to develop web pages.

• HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet.


Definition of HTML• HyperText is the method by which you move

around on the web — by clicking on special text called hyperlinks which bring you to the next page.

• Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).

• HTML is a Language, as it has code-words and syntax like any other language.


History of HTMLHTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.


How Does it WorkHTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages


Basic Structure of HTML


Types of Tags Container Tags Empty Tags

Container tags have a beginning and an end tag, the end tag is similar to the beginning tag but with a “/” sign in front of it.

Empty tags are standalone tag and do not have en end tag.

Example:- <b>and</b> Example:- <br>

<table>and</table>etc.

<hr> etc.


Basic Tags• Heading Tag:– Any document starts with a heading. You can use

different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.


Example of Heading Tag


Example of code Output


• Paragraph Tag– The <p> tag offers a way to structure your text into

different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag.

– This tag indicates the starting of a paragraph.

Example of Paragraph Tag



• Line Break Tag– Whenever you use the <br /> element, anything

following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

– The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML


Example of Line Break Tag



• Horizontal Lines– Horizontal lines are used to visually break up

sections of a document.– The <hr>tag creates a line from the current position

in the document to the right margin and breaks the line accordingly.

– The <hr> tag defines a thematic break in an HTML page .

– The <hr> element is used to separate content (or define a change) in an HTML page.


Example of Horizontal Line



• Image Tag– The HTML <img> tag is used to put an image in an

HTML document.– The <img> tag has two required attributes: src and

alt.– To link an image to another document, simply nest

the <img> tag inside <a> tags.


Example of Image Tag



• Table Tag– The HTML tables allow web authors to arrange data like

text, images, links, other tables, etc. into rows and columns of cells.

– The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.

– It includes three elements in it as <th>, <tr>, <td>.– The <tr> element defines a table row, the <th> element

defines a table header, and the <td> element defines a table cell.


Example of Table Tag



• Anchor Tag– The <a> tag defines a hyperlink, which is used to

link from one page to another.– A link is specified using HTML tag <a>. This tag is

called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.



Example of Anchor Tag

What is CSS• The technology behind style sheet is called

CSS, which stands for Cascading Style Sheets.• CSS is a language that defines style constructs

such as font, color, and positioning, which are used to describe how information on a web page is formatted and displayed.

• CSS styles can be stored in an HTML webpage or in a separate style sheet file.


How does CSS affect HTML

Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:• A set of Properties, which have values set to update

how the HTML content is displayed, for example I want my element's width to be 50% of its parent element, and its background to be red.

• A selector, which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document


Types of CSS


Types of CSSWhen a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. There are 3 types of style sheets. The difference is where the style is defined and the area where that style is applied. These are:o Inline Styleo Internal Style Sheeto External Style Sheet


Inline Styles• An inline style may be used to apply a unique

style for a single element.• To use inline styles, add the style attribute to

the relevant element. The style attribute can contain any CSS property

• Inline style sheet within a tag. Applies only to that particular occurrence of that tag.


Example of Inline Style

• The sytax for inline styles is slightly simpler than that of Internal and External styles in that there is no selector and no curly brackets.– Syntax:-

<element STYLE="property:value">– Example:-

<h1 style="color:blue;margin-left:30px;">This is a Inline Style</h1>


Internal Style Sheets• An internal style sheet may be used if one

single page has a unique style.• The definition is written once in In the head

part of a page. It must be written on every page that requires that style.

• Internal styles are placed at the top of each web page document, before any of the content is listed.


Example of Internal Style Sheet

• The Internal style sheet is defined within the head section.– Syntax:-<head>< style type="text/css">Your Style definitions go here< /style>< /head>


– Example:-<head>< style type="text/css">Body {background-color: #3333FF; color: #000033;}p {margin-left: 6px}< /style>< /head>

External Style Sheets

• With an External style sheet, you can change the look of an entire website by changing just one file!

• External style sheets are separate files full of CSS instructions (with the file extension .css).

• Each page must include a reference to the external style sheet file inside the <link> element.


Example of External Style Sheets

• The <link> element goes inside the <head> section:<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>• Here is how the "mystyle.css" looks:body { background-color: lightblue;}



CONTACT USBATRA COMPUTER CENTRE

SCO 15, Dayal Bagh, Near Hanuman Mandir, Ambala Cantt. Phn No.: 9729666670,0171-4000670 Email: [email protected] Website: www.batracomputercentre.com

html & css training institute in ambala ! batra computer centre

Education