Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to Html Farhan Nisar University of Peshawar.

Similar presentations

Presentation on theme: "Introduction to Html Farhan Nisar University of Peshawar."— Presentation transcript:

1 Introduction to Html Farhan Nisar University of Peshawar

2 HTML Introduction HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

3 HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like 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 Start and end tags are also called opening tags and closing tags

4 EXAMPLE My First Heading My first paragraph.

5 HTML Headings This is a heading This is a heading This is a heading HTML Paragraphs This is a paragraph. This is another paragraph.

6 HTML Links This is a link HTML Images

7 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 This is a link

8 HTML Lines The tag creates a horizontal line in an HTML page. This is a paragraph This is a paragraph This is a paragraph

9 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.

10 HTML Line Breaks Use the tag if you want a line break (a new line) without starting a new paragraph: This is a para graph with line breaks

11 HTML Formatting Tags HTML uses tags like and for formatting output, like bold or italic text. These HTML tags are called formatting tags (look at the bottom of this page for a complete reference). Defines italic text Defines strong text

12 The HTML Tag tag is deprecated in HTML 4, and removed from HTML5. The World Wide Web Consortium (W3C) has removed the tag from its recommendations. In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many HTML elements. The example below shows how the HTML could look by using the tag:

13 Example This paragraph is in Arial, size 5, and in red text color. This paragraph is in Arial, size 5, and in red text color.

14 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: in separate style sheet files (CSS files) in the style element in the HTML head section in the style attribute in single HTML element

15 HTML Style Example - Background Color This is a heading This is a paragraph.

16 HTML Style Example - Font, Color and Size A heading A paragraph.

17 HTML Style Example - Text Alignment Center- aligned heading This is a paragraph.

18 HTML Hyperlinks (Links) A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the tag. The tag can be used in two ways: To create a link to another document, by using the href attribute To create a bookmark inside a document, by using the name attribute Syntex Link text

19 Example Visit farhan HTML Links - The target Attribute Visit farhan!

20 HTML Images - The 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.

21 HTML Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands for "table data," and holds the content of a data cell. A tag can contain text, links, images, lists, forms, other tables, etc

22 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

23 HTML Table Headers Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

24 HTML Lists Unordered Lists An unordered list starts with the tag. Each list item starts with the tag. Coffee Milk

25 HTML Ordered Lists An ordered list starts with the tag. Each list item starts with the tag. Coffee Milk

26 HTML Definition Lists A definition list is a list of items, with a description of each item. The tag defines a definition list. The tag is used in conjunction with (defines the item in the list) and (describes the item in the list): Coffee - black hot drink Milk - white cold drink

27 HTML Forms HTML forms are used to pass data to a server. A 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 tag is used to create an HTML form:. input elements.

28 Text Fields First name: Last name: Password:

29 Radio Buttons Male Female

30 Checkboxes I have a bike I have a car

31 Submit Button Username:

32 The HTML frameset Element The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.

33 The HTML frame Element Note: Defines a set of frames Defines a sub window (a frame) Defines an inline sub window (frame)

34 HTML Iframes An iframe is used to display a web page within a web page.

35 Use iframe as a Target for a Link An iframe can be used as the target frame for a link

36 HTML Colors 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)

37 Entities < is the same as © is the same as © Defines a section in a document Defines style information for a document Defines the relationship between a document and an external resource

38 Blockquote Text quoted from a source. Written by us Address: Box 564, Disneyland Phone:

39 HTML Layouts - Using Tables Main Title of Web Page Menu HTML CSS JavaScript Content goes here

40 HTML Doctypes A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly Title of the document The content of the document......

41 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 tag. The tag goes inside the section:

42 Internal Style Sheet An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the section of an HTML page, by using the tag, like this: body {background-color:yellow;} p {color:blue;}

43 Inline Style 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: This is a paragraph.

44 The HTML title Element Title of the document The content of the document......

45 The HTML base Element

46 The HTML script Element document.write("Hello World!")

47 The HTML noscript Element document.write("Hello World!") Sorry, your browser does not support JavaScript!

48 ADD a video

49 URL - Uniform Resource Locator When you click on a link in an HTML page, an underlying tag points to an address on the world wide web. A Uniform Resource Locator (URL) is used to address a document (or other data) on the world wide web. scheme://host.domain:port/path/filename scheme - defines the type of Internet service. The most common type is http host - defines the domain host (the default host for http is www) domain - defines the Internet domain name, like :port - defines the port number at the host (the default port number for http is 80) path - defines a path at the server (If omitted, the document must be stored at the root directory of the web site) filename - defines the name of a document/resource

50 The Easiest Way to Add Audio to Your Site Play Song

51 Playing Audio in HTML

52 Using the Yahoo Media Player Play Song

53 Using A Hyperlink If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. Play the song

54 Playing Videos in HTML Your browser does not support video

55 Video in Full screen If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. Play a video file

56 Playing a YouTube Video in HTML

57 FANKS Special thanks to Raza who helped me

Download ppt "Introduction to Html Farhan Nisar University of Peshawar."

Similar presentations

Ads by Google