Scribd Logo
Upload

Welcome to Scribd!

  • 70 views

    HTML

    Uploaded by

    Chandrasen Murmu
    The document provides an overview of HTML markup language. It explains that web pages are written in HTML and describes some basic HTML tags and elements like headings, paragraphs, lists, and links. It also covers inserting text, images, and tables and controlling text formatting and layout.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd

    HTML

    Uploaded by

    Chandrasen Murmu
    70 views7 pages
    The document provides an overview of HTML markup language. It explains that web pages are written in HTML and describes some basic HTML tags and elements like headings, paragraphs, lists, and links. It also covers inserting text, images, and tables and controlling text formatting and layout.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides an overview of HTML markup language. It explains that web pages are written in HTML and describes some basic HTML tags and elements like headings, paragraphs, lists, and links. It also covers inserting text, images, and tables and controlling text formatting and layout.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    70 views7 pages

    HTML

    Uploaded by

    Chandrasen Murmu
    The document provides an overview of HTML markup language. It explains that web pages are written in HTML and describes some basic HTML tags and elements like headings, paragraphs, lists, and links. It also covers inserting text, images, and tables and controlling text formatting and layout.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 7

    :HTML TUTORIAL:

    WebPages are written in HTML Markup Language. y y a simple scripting language. HTML is short for Hyper Text

    Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information within documents.

    Basically any HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. All you need to do is type in the code, then save the document, making sure to put an .html extension or an .htm extension to the file.

    TAGS
    Basically, a computer sees an A as simply an A whether it is bold, italic, big or small. To tell the browser that an A should be bold we need to put a markup if front of the A . Such a markup is called a Tag. All HTML tags are enclosed in < and >. PAGE STRUCUTE All normal web pages consist of a head and body. y y The head is used for text and tags that do not show directly on the page. The body is used for text and tags that are shown directly on the page.

    Finally, all WebPages have an <html> tag at the beginning and at the end, telling the browser where the document starts and where it stops. The most basic code the code you will use for any page you make is shown below. <html> <head> <!-- This section is for the title and technical info of the page. --> </head> <body> <!-- This section is for all that you want to show on the page. --> </body> </html>

    HEAD SECTION The head section of the webpage includes all the stuff that does not show directly on the resulting page. The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is loaded. Another thing you will often see in the head section is metatags. Metatags are used for, among other things, to improve the rankings in search engines. Quite often the head section contains JavaScript which is a programming language for more complex HTML pages. Finally , more and more pages contain codes for cascading style sheets (CSS). CSS is a rather new technique for optimizing the layout of major websites.

    BODY SECTION
    The body of the document contains all that can be seen when the user loads the page. All the aspects of HTML y Text o o o o y Links o To local pages o To pages at other sites o To bookmarks y Images o Inserting images (GIF and jpg) o Adding a link to an image Backgrounds o Colors o Images o Fixed Image Tables Frames Forms Metatags Hexadecimal colors Formatting Resizing Layout Listing

    y y y y y

    HTML TEXT
    To enter text on your pages all you have to do is simply enter the text. If you do not specify any attributes for text it will use the default size, font etc. of the visitor s browser. Browsers can only show fonts available on the visitor s PC. Therefore you are limited to

    using the fonts that are available on almost any computer. If you need to use a fancy font, you should use your graphics program to make an image with the text. This will assure that the visitor will see it even if he doesn t have the fancy font you re using. Since images take up much more space than plain text, thus increasing download time, you should use this option with care.

    BASE FONT
    To specify the overall font for your page add the <basefont> tag at he beginning of the <body> section.
    <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. Note:- If you enter a list of fonts, like in the example the browser will use the font in the list available on the visitor s computer. The size attribute specifies the desired size, between 1 (smallest) and 7 (biggest).

    FONT
    The <font> tag will change the font.
    <html> <head> <title>My Page</title> </head> <body> <basefont color="green" face="arial" size="4"> Hello! This is my page.<br><br> <font color="red" face="arial" size="2"> This local text looks different. </font> <br><br>

    This text looks like the first line. </body> </html>

    TEXT LINKS
    The tags used to produce links are the <a> and </a>. The <a> tells where the link should start and the </a> indicates where the link ends. Everything between these two will work as a link. The target of the link is added to the <a? tag using the href= setting. The example
    below shows how to make the word here work as a link to yahoo. Click <a href="http://www.yahoo.com">here</a> to go to yahoo.

    You simply y y y Specify the target in the <a href= >. Then add the text that should work as a link. Finally add an </a> tag to indicate where the link ends.

    TEXT FORMAT
    These are the tags for text formats: <b>text</b> Writes text as bold <i>text</i> Writes text in italics <u>text</u> Writes underlined text <sub>text</sub> Lowers text and makes it smaller <sup>text</sup> Lifts text and makes it smaller <blink>text</blink> Blinks text (Note: Netscape only) <strike>text</strike> Strikes a line through the text <tt>text</tt> Writes text as on a classic typewriter <pre>text</pre> Write text exactly as it is, including spaces. <em>text</em> Usually makes text italic <strong>text</strong> Usually makes text bold Note: The <blink> tag is only supported by Netscape browsers, and should be avoided.

    TEXT SIZE
    These are the tags for changing the font size. <big>text</big> <small>text</small> <h1>text</h1> <h6>text</h6> <font size= 1 >text</font> <font size= 7 >text</font> Increase the size by one Decrease the size by one Writes text in biggest heading Writes text in smallest heading Writes text in smallest fontsize.(8 pt) Writes text in biggest fontsize.(36 pt)

    The <small> and <big> tags are special in that they can be repeated. If you want to increase the font size with a factor two, then you could do it like this: <bid><big>text text text</big></big> Note: While the font tag lets you specify font attributes in plain HTML, you really should look into the tutorial on CSS to learn how to get full, flexible and much more advanced control of your text.

    TEXT LAYOUT
    These tags will let you control the layout. <p>text</p> <p align= left >text</p> <p align= center >text</p> <p align= right >text</p> <text<br> <nobr>text</nobr> Text<wbr> Adds a paragraph break after the text.(2linebreaks). Left justify text in paragraph. Center text in paragraph Right justify text in paragraph Adds a single line break where the tag is. Turns off automatic line breaks even if text is wider than the window. Allows the browser to insert a line break at exactly this point even if the text is within <nobr> tags. Center text. Center text

    <center>text</center> <div align= center >text</div> <div align = left > text Left justify text </div> <div align = right > text Right justify text </div> Note in particular the difference between the <p> and the <div> tags. The <div> tag allows you to justify content without being forced to add a double line break. Also, note that these alignment tags are not limited to text. They work on text, images, applets or whatever it is that you insert on the page.

    HTML Lists
    To create a bulleted list you need to add <ul> and </ul> tag at the beginning and the end of the list. Numbered lists have <ol> tags instead of <ul> tags. To separate single list items use <li> and </li> tag. There are special settings that you can use to customize the lists on your page.

    BULLETED LISTS You have the following bullet options: y y y Disc Circle Square

    HTML CODE EXPLANATION <ul> Makes a bulleted list using the default type: <li>text</li> y Text <li>text</li> y Text <li>text</li> y Text </ul> Starts a bulleted list using discs as bullets: <ul type= disc > <li>this is one line</li> y This is one line <li>This is another line</li> y This is another line <li>And this is the final line</li> y And this is the final line </ul> Starts a bulleted list using circles as bullets: <ul type= circle > <li>this is one line</li> o This is one line <li>This is another line</li> o This is another line <li>And this is the final line</li> o And this is the final line </ul> Starts a bulleted list using squares as bullets: <ul type= square > <li>this is one line</li>  This is one line <li>This is another line</li>  This is another line <li>And this is the final line</li>  And this is the final line </ul> NUMBERED LISTS You have the following number options: y y y y y Plain numbers Capital letters Small letters Capital Roman Numbers Small Roman Numbers

    In addition to these options you can specify at which number the list should start. The default start value for numbered lists is at number one (or the letter A). HTML CODE
    <ol> <li>text</li>

    EXPLANATION Makes a numbered list using the default number type: 1. Text

    <li>text</li> <li>text</li> </ol> <ol start="5">

    2. Text 3. Text Starts a numbered list, first # being 5. 5. This is one line 6. This is another line 7. And this is the final line

    <ol type="A">

    Starts a numbered list, using capital letters. A. This is one line B. This is another line C. And this is the final line <ol type="a"> Starts a numbered list, using small letters. a. This is one line b. This is another line c. And this is the final line <ol type="I"> Starts a numbered list, using capital roman numbers. I. This is one line II. This is another line III. And this is the final line <ol type="i"> Starts a numbered list, using small roman numbers. i. This is one line ii. This is another line iii. And this is the final line <ol type="1"> Starts a numbered list, using normal numbers. 1. This is one line 2. This is another line 3. And this is the final line <ol type="I" start="7"> An example of how type and start can be combined. VII. VIII. IX. This is one line This is another line And this is the final line

    You might also like