Scribd Logo
Upload

Welcome to Scribd!

  • 47 views

    Internet and Web Technology: Part-1

    Uploaded by

    Dev Dutt Dey
    The document discusses the basics of HTML including common tags such as headings, paragraphs, links, and images. It explains HTML elements have opening and closing tags that can contain text or other tags. Styling in HTML can be done with tags like <font> or by linking a CSS stylesheet to style elements, text, and control layout.

    Copyright:

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

    Internet and Web Technology: Part-1

    Uploaded by

    Dev Dutt Dey
    47 views23 pages
    The document discusses the basics of HTML including common tags such as headings, paragraphs, links, and images. It explains HTML elements have opening and closing tags that can contain text or other tags. Styling in HTML can be done with tags like <font> or by linking a CSS stylesheet to style elements, text, and control layout.

    Original Title

    1

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses the basics of HTML including common tags such as headings, paragraphs, links, and images. It explains HTML elements have opening and closing tags that can contain text or other tags. Styling in HTML can be done with tags like <font> or by linking a CSS stylesheet to style elements, text, and control layout.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    47 views23 pages

    Internet and Web Technology: Part-1

    Uploaded by

    Dev Dutt Dey
    The document discusses the basics of HTML including common tags such as headings, paragraphs, links, and images. It explains HTML elements have opening and closing tags that can contain text or other tags. Styling in HTML can be done with tags like <font> or by linking a CSS stylesheet to style elements, text, and control layout.

    Copyright:

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

    Internet and Web Technology

    Part-1

    Pinaki Sankar Chatterjee KIIT University

    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 language A markup language is a set of markup tags HTML uses markup tags to describe web pages

    HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> 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

    HTML Documents = Web Pages HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
    <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

    Example Explained The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph

    .HTM or .HTML File Extension? When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

    HTML Headings HTML headings are defined with the <h1> to <h6> tags.
    Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

    HTML Paragraphs HTML paragraphs are defined with the <p> tag.

    Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>

    HTML Links HTML links are defined with the <a> tag.
    Example <a href=www.gmail.com">This is a link</a>

    HTML Images HTML images are defined with the <img> tag.
    Example <img src=abc.jpg" width="104" height="142" />

    HTML Element Syntax An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes Nested HTML Elements Most HTML elements can be nested (can contain other HTML elements). HTML documents consist of nested HTML elements.
    HTML Document Example

    <html> <body> <p>This is my first paragraph.</p> </body> </html>

    Don't Forget the End Tag


    Some HTML elements might display correctly even if you forget the end tag: The example above works in most browsers, because the closing tag is considered optional. Many HTML elements will produce unexpected results and/or errors if you forget the end tag . <p>This is a paragraph <p>This is a paragraph

    Empty HTML Elements HTML elements with no content are called empty elements. <br> is an empty element without a closing tag (the <br> tag defines a line break). HTML Tip: Use Lowercase Tags HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.

    Attribute Example HTML links are defined with the <a> tag. The link address is specified in the href attribute:
    Example <a href="http://www.google.com">This is a link</a>

    Always Quote Attribute Values Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. HTML Tip: Use Lowercase Attributes Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML recommendation.

    HTML Lines The <hr /> tag creates a horizontal line in an HTML page.
    Example <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>

    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. Comments are written like this:
    Example <!-- This is a comment -->

    HTML Formatting Tags HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags.

    Often <strong> renders as <b>, and <em> renders as <i>. However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only. <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

    HTML Text Formatting Tags


    Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Description Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text

    HTML "Computer Output" Tags


    Tag <code> <kbd> <samp> <tt> <var> <pre>

    HTML Citations, Quotations, and Definition Tags


    Tag <abbr> <acronym> <address> Description Defines an abbreviation Defines an acronym Defines contact information for the author/owner of a document <bdo> Defines the text direction <blockquote> Defines a long quotation <q> Defines a short quotation <cite> Defines a citation <dfn> Defines a definition term

    The HTML <font> Tag 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 <font> tag:

    Example <p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color. </font> </p> <p> <font size="3" face="verdana" color="blue"> This paragraph is in Arial, size 5, and in red text color. </font> </p>

    Styling HTML with CSS 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 elements Using the HTML Style Attribute It is time consuming and not very practical to style HTML elements using the style attribute. The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

    HTML Style Example - Background Color The background-color property defines the background color for an element:
    Example <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>

    HTML Style Example - Font, Color and Size The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

    Example <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>

    HTML Style Example - Text Alignment The text-align property specifies the horizontal alignment of text in an element:

    Example <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>

    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 <a> tag. The <a> tag can be used in two ways: 1.To create a link to another document, by using the href attribute 2.To create a bookmark inside a document, by using the name attribute HTML Link Syntax The HTML code for a link is simple. It looks like this: The href attribute specifies the destination of a link.
    <a href="url">Link text</a>

    HTML Links - The target Attribute The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab:

    Example <a href="http://www.google.com/" target="_blank">Visit google.com!</a>

    HTML Links - The name Attribute The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. Example A named anchor inside an HTML document: Create a link to the "Useful Tips Section" inside the same document:
    <a name="tips">Useful Tips Section</a>

    <a href="#tips">Visit the Useful Tips Section</a>

    HTML Images - The <img> Tag and the Src Attribute In HTML, images are defined with the <img> tag. The <img> 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. Syntax for defining an image: <img src="url" >

    HTML Images - The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text:

    <img src="boat.gif" alt="Big Boat" />

    HTML Images - Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default:

    <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

    You might also like