C HAPTER – 3 I NTRODUCTION TO H TML By :- Pinkesh H. Patel.

Slides:



Advertisements
Similar presentations
Introduction to HTML
Advertisements

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Session 2 Introduction to HyperText Markup Language 4 (HTML 4) Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.
HTML popo.
Web Development & Design Foundations with XHTML
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
COS 125 Internet Fundamentals and Web Page Design Day 3.
HTML popo.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
OMT II Mam Saima Gul. * Static web page * a web page with contents that remain fixed and unchanged once it has been created by the author Web server Client.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling 9.7Linking 9.8Images 9.9Formatting Text With 9.10Special.
 2001 Deitel & Associates, Inc. All rights reserved. 1 Outline 9.1Introduction 9.2Markup Languages 9.3Editing HTML 9.4Common Tags 9.5Headers 9.6Text Styling.
Marking Up With Html: A Hypertext Markup Language Primer
Database-Driven Web Sites, Second Edition1 Chapter 2 INTRODUCTION TO HTML.
Developing a Basic Web Page with HTML
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
ULI101: XHTML Basics (Part III) Introduction to XHTML / Continued … Block-Level vs. Inline Elements (tags) Manipulating Text,  , Text Characteristics,,,,,,,,,,,,,,,
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
HTML Essentials Markup ( Part I ). Why Markup ? Markup gives meaning and structure to your web page Creates a relationship between the elements.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.
1 Web Developer Foundations: Using XHTML Chapter 2 Key Concepts.
HTML. WHAT IS HTML 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.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
CSCI 1101 Intro to Computers
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
Introduction to HTML 1 Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.
Just Enough HTML How to Create Basic HTML Documents.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
HTML: Hyptertext Markup Language Doman’s Sections.
ECA 228 Internet/Intranet Design I Intro to Markup.
Agenda Block-Level vs. Inline Elements (tags) Manipulating Text,  , Text Characteristics,,,,,,,,,,,,,,, Font Attributes: size, color, face Horizontal.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
CPT 499 Internet Skills for Educators Session Ten Class Notes.
Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.
L. Anne Spencer (c) 2001 Basic Web Design Document, text, & layout formatting tags & attributes.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Text Building a Website Lesson 3. Headings,,,,, Headings,,,,, HTML has 6 levels of headings,,,,,,,,,, is used for main headings is used for main headings.
What is HTML? 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.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
Hypertext Markup Language.  Developed by Tim Berners-Lee in 1990  Stands for HyperText Markup Languange  A format that tells a computer how to display.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
HTML Basics.
Marking Up with XHTML Tags describe how a web page should look
Chapter 1: Introduction to XHTML (part 1)
WEBSITE DESIGN Chp 1
Marking Up with XHTML Tags describe how a web page should look
AN INTRODUCTION BY FAITH BRENNER
Lesson 2: HTML5 Coding.
Presentation transcript:

C HAPTER – 3 I NTRODUCTION TO H TML By :- Pinkesh H. Patel

W HAT IS INTERNET ? The Internet is a global system of interconnected computer networks that use the standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies.

U NIT -3 I NTRODUCTION TO HTML W HAT IS HTML ? HTML, which stands for Hypertext Markup Language HTML is the basic building-blocks of WebPages. HTML documents are composed entirely of HTML elements that, in their most general form have three components: a pair of tags, a "start tag" and "end tag"; some attributes within the start tag; and finally, any textual and graphical content between the start and end tags, perhaps including other nested elements. The HTML element is everything between and including the start and end tags. Each tag is enclosed in angle brackets.

H TML T AGS : There are two type of html tags Paired tag Single tag ( Unpaired tags )

S INGLE TAGS This unpaired tag is actually the first line of your HTML document. This tag is important because it alerts the browser that is accessing your page that you are using a particular version of HTML. This tag is required in all HTML pages. Example :- [In XHTML : ] Use line breaks to control the way in which you want the text to appear on the screen.

S INGLE TAGS [In XHTML : ] Horizontal rule, to which attributes can be added, such as: aligned left, right, and center Adjusted for size, where n is the size in pixels Adjusted for width where w is the width in pixels or a percentage of the width of the page Made a solid bar

S INGLE TAGS [In XHTML : ] The meta tag must be included within the document's header and is used to supply additional information about your document. which is sent out to the remote server by your server, just before it sends out the document. This information is supplied by including one or more of the following attributes.

M AIN TAGS and The opening part of the html tag should be the second tag used in your document. It alerts a browser to the presence of an html document. The closing html tag should be the last line of your document. The head element is a container for all the head elements. Elements inside can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section:,,,,, and. The text between and is the visible page content.It tells that this is the beginning of the page.

P AIRED TAGS and The title tag allows you to place text across the top of the browser window. The text between the opening and closing tags will be the title of your document. Do not use any special formatting or markup tags in the title of your document. and Paragraph break. This tag marks the beginning of a paragraph, not the end of one. It instructs the browser to place a blank line after the preceeding paragraph. The closing is typically omitted, and this does not violate the standard. All text between two tags are considered to be in the same paragraph. The block of text is called an element. A paragraph break has one attribute which can take three values : The default is to be aligned to the left side, so you don't have to use this one. will center the paragraph will place the paragraph on the right margin

P AIRED TAGS and This tag defines the headers in the document, where # is a number from 1 (the largest) to 6 (the smallest). Headers will place an automatic paragraph break after the last of the text, so you don't have to use a in conjunction with this tag. Heading1 Heading2 Heading3 Heading4 Heading5 Heading6

P AIRED TAGS and Bold text, which the user's browser cannot change. and This tag produces italicized text and This tag will make the text bigger than surrounding text and This tag will make the text smaller than surrounding text and Strike out text by placing a line through it. Note that not all browsers can display this, so be careful about using it and This tag produces subscript and This tag produces superscript

P AIRED TAGS and This tag produces underlined text. Since many browsers indicate links with underlined text, you should probably use this sparingly.

C HAPTER 7 F ORMATTING B ASICS Generally, text is unformatted in your Web document. You can use some text formatting options like, boldfacing, italic, underline etc. There are two major classes of text markup. Character Element Look Element

C HARACTER E LEMENT The character elements describe the type of the text formatting. :- It id used to specify emphasized text within an HTML document. :- This element indicates text, which should be more forceful than surrounding text. : - This element indicates text, which is an example of something.

:- This element indicates text that is the code for a program. :- This element denotes contact information for the author or an organization of the web site. :- This element indicates a reference to work, such as a book, report or web site., :- The element indicates that the text has been deleted from the current revision of the document. The element indicates that the text has been inserted into document.

:- This element indicates characters that should be typed in at a keyboard. Typically this is used in instruction manual. :- To indicate that a piece of text is a variable, i.e., a notation to be replaced by different actual expression. :- This element can be regarded as a special kind of emphasis. But some browser do not effectively support it. :- This element is used around names of people mentioned in a document. :- This element defines an abbreviation. It is just like normal text, but is used by automatic indexers. :- This element defines an acronym. :- This element defines text names the author of a document.

L OOK E LEMENT This element use for how the text is to be displayed and not it’s meaning. :- This element defines text that should be shown in boldface. It can be nested with other element but some browsers will respect only the innermost tag. :- This element defines text that should be shown in italics. It can be nested with other element but some browsers will respect only the innermost tag. : This element defines text that should be shown in underneath. It can be nested with other element but some browsers will respect only the innermost tag.

:- This element defines text that should be shown in a fixed width font. It can be nested with other element but some browsers will respect only the innermost tag.

C HAPTER 8 :- S PECIAL C HARACTER HTML codes use special characters including the left bracket ( ), ampersand (&), and quote(“) to represent certain attribute. Some characters are available on keyboard, but we need to use extended character, which are not found on the keyboard. Two formats can be used to do this. 1. Code number ( character reference ) 2. Phonetic reference ( entity reference )

C ODE N UMBER Character reference are composed of three parts. A leading ampersand character, (&). The decimal number corresponding to the character, preceded by a numbers symbol (#xxx). A terminating semicolon (;). For example the character reference for less than symbol (<) is <

P HONETIC R EFERENCE Entity reference are similar, but use symbolic names to represent character. Phonetic reference are composed of three parts. A leading ampersand character, (&). The name of the entity. A terminating semicolon (;). For example the character reference for less than symbol (<) is <

T ARGET L INKS :- A NCHOR TAG The HTML anchor element is used to create a link to a resource (another web page, a file, etc.) or to a specific place within a web page. An anchor is a piece of text or some other object (for example an image) which marks the beginning and/or the end of a hypertext link. The element is used to mark that piece of text (or inline image), and to give its hyper textual relationship to other documents. The text between the opening and closing tags,...text... can be the start or destination (or both) of a link. Here are some simple examples:

A BSOLUTE PATH :- Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a Web element is also often referred to as the URL. For example, the absolute path to this Web page is: 502a.htm

R ELATIVE PATH Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path: links in the same directory as the page have no path information listed filename sub-directories are listed without any preceding slashes weekly/filename links up one directory are listed as../filename

I MAGE AS HYPERLINK To make an image into a click-able hyperlink, simply replace the hyperlink text with some HTML image code. Images can have a relative path (/images/sample-image.gif), or they can have an absolute path ( image.gif)

A UDIO AND VIDEO IN HTML