Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
192 views

Computer Lab File: To-Ms. Jyoyi by - Shivani Kapoor Bba (Morning Batch) Ivth Sem. 00114101709

The document provides information about HTML tags and elements used to structure web pages. It discusses: 1) Common HTML tags like <html>, <head>, <title>, and <body> that define the overall structure of an HTML document. 2) Empty elements like <br> and <img> that are used as markers without content between opening and closing tags. 3) The <p> tag for defining paragraphs of text and the <br> tag for inserting line breaks. 4) Comment tags <!-- --> for inserting comments in HTML code.

Uploaded by

Shivani Kapoor
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
192 views

Computer Lab File: To-Ms. Jyoyi by - Shivani Kapoor Bba (Morning Batch) Ivth Sem. 00114101709

The document provides information about HTML tags and elements used to structure web pages. It discusses: 1) Common HTML tags like <html>, <head>, <title>, and <body> that define the overall structure of an HTML document. 2) Empty elements like <br> and <img> that are used as markers without content between opening and closing tags. 3) The <p> tag for defining paragraphs of text and the <br> tag for inserting line breaks. 4) Comment tags <!-- --> for inserting comments in HTML code.

Uploaded by

Shivani Kapoor
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 20

COMPUTER LAB FILE

TO- MS. JYOYI BY- SHIVANI KAPOOR BBA (morning batch) IVth sem. 00114101709

CONTENTS

An Introduction to the World Wide Web:


The World Wide Web, abbreviated as WWW or W3 and commonly known as the Web, is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks. "The World-Wide Web was developed to be a pool of human knowledge, and human culture, which would allow collaborators in remote sites to share their ideas and all aspects of a common project."

WEB BROWSER:
A web browser or Internet browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece of content.[1] Hyperlinks present in resources enable users to easily navigate their browsers to related resources. Although browsers are primarily intended to access the World Wide Web, they can also be used to access information provided by Web servers in private networks or files in file systems. Some browsers can also be used to save information resources to file systems.

HTML:
HTML, which stands for Hypertext Markup Language, is the predominant language for web pages. HTML is the basic building-blocks of WebPages. HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tables, images, etc. The purpose of a web browser is to read HTML documents and compose them into visual or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML WebPages. Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicitly presentational HTML markup.

DOCUMENT TAG:
Document tags define the overall structure of an HTML document. There are four tags every HTML document should have. These tags define the type of document it is, and the major sections. These tags are<HTML>, <HEAD>, <TITLE>, and <BODY ...>. You may also wish to use the <! DOCTYPE ...> declaration under some circumstances. A really basic document might look like this: <HTML> <HEAD> <TITLE>A Really Basic Document</TITLE> </HEAD> <BODY> This is a really basic document. </BODY> </HTML>

EMPTY ELEMENTS:
In the HTML Document Type Definition, a very few elements are declared as EMPTY. This means two things: 1. They do not contain any text. They are used simply as markers (and in some cases are used for whatever is contained in their attributes. 2. EMPTY attributes are not permitted to have an end-tag. Thus <img src="blahblah.gif"></img> is illegal. Of the elements used in SUL/AIR, the only EMPTY elements are

hr Horizontal rule br Line break img Inline image input Input

<Hr> and <br> are used simply as markers and cause a horizontal rule or line break to be inserted in the output. <img> and <input> (which is only used in forms), are used for the attributes they carry. For example, <img src="globedfruit.gif"> tells the browser to insert the file "globedfruit.gif" into the output. There are several other EMPTY elements (<link>, <isindex>, <base>, <meta>, <nextid>), but these are not normally used in SUL/AIR documents Do not confuse an EMPTY element with an element that just happens to have nothing in it at the moment. <br> is an EMPTY element; it is not permitted to have any content. But <p></p> is a paragraph that just happens not to have any words in it (the browser would insert an empty line into the output.

Entering Paragraph Text on Your Web Page:


With your template prepared, and with an understanding of the two types of tags in HTML, you're ready to enter text on a Web page. As mentioned earlier, all the text that you enter on a page should come between the <BODY> and </BODY> tags. Like <EM>, the body tags are container tags that tell a Web browser what parts of the HTML document should be displayed in the browser window. You've seen that you can just type text into an HTML document and it will be displayed in the browser. Technically, though, most of the text you type should be in another container tag: the <P> (paragraph) tag. This tag is used to show a Web browser what text in your document constitutes a paragraph. For the most part, Web browsers ignore more than one space between words and will ignore returns that you add to your HTML file while you're creating it. In order to give the appearance of paragraphs, then, you have to use the paragraph container tag. The paragraph tag uses the following format: <P>Here is the text for my paragraph. It doesn't matter how long it is, how many spaces are between the words or when I decide to hit the return key. It will create a new paragraph only when I end the tag and begin with another one. </P>

The <BR> Tag:


this is line 1<BR> this is line 2 The BR tag is used to tell the browser to start the text that follows on a new line. This is not like the <P> (paragraph) tag that creates a blank line before starting the new text. You can also use the BR tag to reset margins if for instance you used an ALIGN=RIGHT or ALIGN=LEFT inside an <IMG> tag to wrap text along side an image. Examples would be: <BR CLEAR=RIGHT> clear the right margin. <BR CLEAR=LEFT> clear the left margin. <BR CLEAR=ALL> clear both the left and right margins.

COMMENT TAG:
The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside scripts and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text. A comment declaration starts with <!, followed by zero or more comments, followed by >. A comment starts and ends with "--", and does not contain any occurrence of "--". This means that the following are all legal SGML comments: 1. 2. 3. 4. 5. <!-- Hello --> <!-- Hello -- -- Hello--> <!----> <!------ Hello --> <!>

Note that an "empty" comment tag, with just "--" characters, should always have a multiple of four "-" characters to be legal. (And yes, <!> is also a legal comment - it's the empty comment).

Implicit and Explicit Text Emphasis:


Implicit tags are those that allow the browser to choose, within limitations, how the marked-up text will be displayed. Header tags are actually an example of an implicit tag, since the HTML designer has no control over how much bigger or smaller a header tag will be. Although most browsers will render header tags in somewhat similar ways, others (for instance, nongraphical browsers) have to come up with another system for emphasis, such as underlining or highlighting the text. Because HTML was originally created with the overriding mission of being displayed on nearly any computer system, implicit tags for emphasis were a necessity. HTML allows the designer to decide what text will be emphasized. But only explicit tags tell the Web browser how to render that text. Explicit Styles Explicit tags are also often called physical tags, since they very specifically tell the Web browser how you want the text to physically appear. The browser is given no choice in the matter. The basic explicit tags are containers that let the user mark text as bold, italic, or underlined. HTML Physical Container Tags Meaning Bold text Italic text Underlined text

Tags <B>, </B> <I>, </I> <U>, </U>

Implicit HTML Tags Implicit styles are often called logical styles, since they allow the browser some freedom in how it will display the text. These tags, like the header tags, are generally relative to

one another, depending on the browser being used to view them. See Table 7.2 for some of the common implicit (logical) tags Some Basic Logical HTML Tags Meaning Generally Rendered as Emphasis Italic text Strong emphasis Bold text Teletype Monospaced text

Tags <EM>, </EM> <TT>, </TT>

<STRONG>, </STRONG>

BLOCKQUOTE Element:
The BLOCKQUOTE element defines a block quotation of text. A typical browser will render this in an appropriate way, for example by slightly indenting the text, or by italicizing it. BLOCKQUOTE also causes a paragraph break, and typically forces white space both before and after the quotation. BLOCKQUOTE can contain paragraphs, and most standard markup. For example, the following text: I think it ends <BLOCKQUOTE><P>Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembered. Fair twilight, and foxy swarms of ants, did slyly open the jars of jam. </p> </BLOCKQUOTE> but I might be wrong. Is rendered as follows: I think it ends Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembered. Fair twilight, and foxy swarms of ants, did slyly open the jars of jam. but I might be wrong.

PRE-FORMATTING TEXT:
The PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-width font, should not collapse whitespace, and should not wrap long lines. PRE is useful for formatting computer code or poetry where whitespace is important, but since preformatted text is inherently visual, authors should avoid dependence on it wherever possible. When using PRE, authors should avoid altering the element's fixed-width font or non-collapsing whitespace properties by means of style sheets. The following example features Java code in a PRE element: <PRE><CODE CLASS=Java> class HelloWorld {public static void main(String[] args) System.out.println("Hello World!");}} </CODE></PRE> The code in the preceding example would be more difficult to read if it were not preformatted, and so PRE is used to provide the proper spacing. Note that the CODE element is also included to add structural information.

THE FONT ELEMENT:


The HTML element FONT is an inline element used to change font sizes, font colors and font styles of the text in your WebPages, but it is deprecated in HTML 4.0 in favor of cascading style sheets. The reason for this is simple: CSS (cascading style sheets) give you much more flexibility and many more styling options than the FONT element.
Being classified as deprecated, the FONT element might become obsolete in the future but may still be used with the Dads (Document Type Definitions) HTML 4.0, subversions "transitional" and "frameset", but not in "HTML 4.0 strict". As it is supported by most browsers and still widely used today on many WebPages and also appears in many of the website templates you might be using, I have decided to include this short lesson about the FONT element and its attributes, so you at least know it when you see it somewhere. However, you shouldnt be using it in the HTML code of your own WebPages and I want to encourage you to use cascading style sheets instead - its so much better. Due to its nature of being an inline element, FONT may be used inside all inline elements and block-level elements except PRE (the element for preformatted text, see 1stPage2000s reference). The only things you can do with the FONT element are changing font sizes, font colors and font styles of the text of your WebPages. For this purpose, the FONT element is used in combination with the attributes SIZE, COLOR and FACE like shown below. 1. Font Sizes As you have seen in the previous lessons, the font used by default is the one which is set up as the default text font in your browser. Usually this is "Times New Roman", black color and size 3. To change the font size of the text on your WebPages, you simply embed the text in the FONT element and add the SIZE attribute with a value between 1 (very small) and 7 (very big) to the opening font tag. See example below.

Display Example: This is how it looks like in your browser. <h1>Different Font Sizes</h1> <p>Text in standard font, usually "Times New Roman" - size: 3 color: black.</p> <p> <font <font <font <font <font <font </p> size="1"> size="2"> size="4"> size="5"> size="6"> size="7"> Font Font Font Font Font Font size size size size size size 1 2 4 5 6 7 </font> </font> </font> </font><br> </font> </font>

2. Font Colors To change the text color you need to add the attribute COLOR to the opening FONT tag and assign it a value for the color. The color value can be any of the following 16 color names: black, silver, white, gray, maroon, red, blue, green, yellow, purple, fuchsia, cyan, lime, olive, navy, teal, aqua. Instead of the color names, you can also use the hexadecimal numbers for the colors, which are specified according to the RGB value for each color. The hexadecimal numbers must be prefixed by the "#" sign. Examples: #000099 for dark blue or #FFFF99 for a faint yellow. Dont worry about hexadecimal numbers, the easiest way to find the correct code for any color is to use 1stPage2000s color picker. Study the example below first and then watch the video to learn how to use the color picker.

Display Example: This is how it looks like in your browser. <h1>Different Font Colors</h1> <p>Text in standard font, usually "Times New Roman" - size: 2 color: black.</p> <p> <font <font <font <font </p> size="4" color="blue"> Font size 4, blue color </font> size="5" color="green"> Font size 5, green color </font><br> size="2" color="#FFFF00"> Font size 2, yellow color </font> color="#FF0000"> Standard font size, red color</font>

3. Different Fonts To change the font style from the default (Times New Roman) to a different style, simply add the attribute FACE to the opening FONT tag. As value for the FACE attribute you can use any specific font name such as "verdana", "arial", "georgia", "bookman old style", "comic sans ms" and many more. Alternatively you may use generic font styles such as "serif", "sans-serif", "cursive", "fantasy" and "monospace". The font face values are case-insensitive, i.e. it doesnt matter whether you type "Arial" or "arial". Beware! Not all users might have all the font styles installed on their computers, so especially when you are planning to use very specific fonts, you should specify at least one alternative font style (either a more common font name or a generic font). Simply add one or two more comma-separated values to the FACE attribute, which is also shown in the example below.

Display Example: This is how it looks like in your browser. <h1><u>Different Font Faces, Colors and Sizes Combined</u></h1> <p>Text in standard font, usually "Times New Roman" - size: 3 color: black.</p> <p><font face="verdana">font face Verdana</font></p> <p><font face="Mistral" size="6" color="navy"> font face: Mistral, size: 6, color: navy</font></p> <p><font face="Comic Sans MS">font face Comic Sans MS</font></p> <p><font face="courier" size="2">font face Courier, size 2</font></p> <p><font face="Helvetica, arial" color="#006633"> font face Helvetica, alternatively Arial, color: dark green</font></p> <h2><u>generic font styles</u></h2> <p><font size="4"> <font face="cursive">cursiv (f.ex. Comic Sans MS)</font><br> <font face="monospace">monospace (f.ex. Courier New)</font><br> <font face="fantasy">fantasy (f.ex. Western)</font><br> <font face="sans-serif">sans-serif (f.ex. Helvetica)</font><br> <font face="serif">serif (f.ex. Times)</font> </font></p>

BASEFONT TAG:
To specify the overall font for your page add the <basefont> tag at the beginning of the <body> section. Example: The page as it looks in the browser. Hello! This is my page. All text looks the same since I only specified a basefont.

HTML: The code to produce the above example. <html> <head> <title>my page</title> </head> <body> <basefont face="arial, verdana, courier" size="4" color="green"> Hello! This is my page.<br> All text looks the same<br> since I only specified a basefont.<br> </body> </html>

The color attribute selects the desired color for your text. The face attribute selects the desired font.

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> How the HTML code above looks in a browser:

Coffee Milk

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> How the HTML code above looks in a browser: 1. Coffee 2. Milk

DEFINITION LIST:
A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> How the HTML code above looks in a browser: Coffee - black hot drink Milk - white cold drink

MENU LIST:
The MENU element defines a menu list. The element contains one or more LI elements that define the actual items of the list. The LI elements must not contain block-level elements, which prevents MENUs from being nested. The COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

MENU is deprecated in HTML 4 in favor of UL. <menu> <li>html</li> <li>xhtml</li> <li>css</li> </menu>

DIRECTORY LIST:
The DIR element is similar to the UL element. It represents a list of short items, typically up to 20 characters each. Items in a directory list may be arranged in columns, typically 24 characters wide. <DIR> </DIR>

You might also like