Scribd Logo
Upload

Welcome to Scribd!

  • 2 - Designing of Simple Web Pages

    Uploaded by

    pubgwick007
    32 views17 pages
    This document provides an overview of a lecture on web fundamentals and web page designing. It discusses HTML as the publishing language of the web and introduces key concepts like hypertext, markup languages, and common HTML tags. It also outlines new features of HTML5 and fundamentals of HTML like elements, attributes, and text styling. The outcomes of the lecture are to practically learn web page designing.

    Original Description:

    Original Title

    2- Designing of Simple Web Pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an overview of a lecture on web fundamentals and web page designing. It discusses HTML as the publishing language of the web and introduces key concepts like hypertext, markup languages, and common HTML tags. It also outlines new features of HTML5 and fundamentals of HTML like elements, attributes, and text styling. The outcomes of the lecture are to practically learn web page designing.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    32 views17 pages

    2 - Designing of Simple Web Pages

    Uploaded by

    pubgwick007
    This document provides an overview of a lecture on web fundamentals and web page designing. It discusses HTML as the publishing language of the web and introduces key concepts like hypertext, markup languages, and common HTML tags. It also outlines new features of HTML5 and fundamentals of HTML like elements, attributes, and text styling. The outcomes of the lecture are to practically learn web page designing.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 17

    Faculty Of Engineering and Technology

    Department of Computer Science


    Course: Web Fundamental
    Course Code : CS- 103
    (Lecture-2)

    Nasratullah zarif
    Lecturer
    Department of Computer Science
    Email: nasratullahzarif393@gmail.com
    Mobile: +93(0) 786586333
    CONTENTS

    Web Page Designing


     Designing of Simple Web Page Introductions

     Markup Languages

     Common Tags

     Headers

     Text Styling

    2
    OUTCOMES

    At the end of this lecture, students will be able to;

    • Practically learn the web page designing.

    3
    Web Page Designing

    What is HTML ?
     HTML is the publishing language of the World Wide Web, or the standard
    used to create web pages is called HTML.
     Markup language that defines the structure of information by using a variety
    of tags and attributes, which is designed to display text and other information
    on a screen and provide hyperlinks to other Web documents.
    Web Page Designing
    Hypertext:
     Text that contain hyperlinks you click to jump from document to document.
     This is a reference to the ability of Web pages to link to one another.
    Markup Languages:
     A markup language is a computer language that uses tags to define elements within
    a document.
     It is human-readable, meaning markup files contain standard words, rather than
    typical programming syntax.
     While several markup languages exist, the two most popular are HTML and XML.
    Web Page Designing
    HTML5:
     HTML5 is the new and latest version of HTML.
     HTML5 came in 2008, while the previous version came in 1999.
     HTML5 come with new elements.
     Some elements were dropped.
     Modern browsers support some HTML5 elements, while HTML is still work
    in progress.
    Web Page Designing
    Some New Features of HTML5:
     New structural elements (<header>, <footer>, <nav> and more).
     New form controls like (email, calendar, date, time, URL, search) and client-
    side validation.
     Native browser support for audio and video (<video>, <audio>).
     The canvas element for drawing.
     Better support for local offline storage.
     Drag & Drop.
    Web Page Designing
    Elements are Simple:
    Before HTML5
     <script type=“text/javascript” scr=“js-file.js”></script>.
     <link rel = “stylesheet” type=“text/css” scr=“css-file.css”>
    After HTML5
     <script scr=“js-file.js”></script>
     <link rel = “stylesheet” scr=“css-file.css”>
    Web Page Designing
    HTML Fundamentals:
     Clear text.
     Case insensitive.
     Ignores white space.
     Comprised of tags also called elements.
     Open tags and closed tags.
    Web Page Designing
    HTML Elements:
     Open tags
    • <tag-name attributes/>
    • <hr/>, <br/>
    • <img src=“url” width=‘120px’ height=’80px’/>
     Closed tags
    • <tag-name attributes> content</tag-name>
    • <b>text to be bolded</b>
    • <p>paragraph text</p>
     Comments
    • < ! - - comment text -- >
    Web Page Designing
    HTML Attributes:
     HTML elements can have attributes.
     Attributes provide additional information about the element.
     Attributes are always specified in the start tag.
     Attributes come in name/value pairs like: name="value“.
    Example: <body bgcolor=“green”>
    Common Tags
    (<HTML>. . . </HTML>):
     The entire HTML document.
    (<HEAD> . . . </HEAD>):

     The head, or prologue, of the HTML document.

    (<BODY> . . . </BODY>):
     All the other content in the HTML document.
    <TITLE> . . . </TITLE>:
     The title of the document.
    Common Tags
    <h1> through <h6> (Headings):
     These logical block tags implement six levels of document headings; <h1> is
    the most prominent and <h6> is the least prominent.
    • <h1 >Level 1 heading</h1>
    • <h2> Level 2 heading </h2>
    • <h3 contenteditable="true" > Level 3 heading </h3>
    • <h4> Level 4 heading </h4>
    • <h5> Level 5 heading </h5>
    • <h6 > Level 6 heading </h6>
    Common Tags
    <P> . . . (</P>):
     Paragraph Hitting a return in the HTML file will not make a new paragraph when the
    file is viewed. You need to use this tag to make a new paragraph.
    <BR>:
     Line Break This tag will show a blank line.
    <HR>:
     Horizontal Rule Creates a horizontal line on the page.
    <!- . . . ->
     Comment The comments you write in the middle will not show up on the page when
    viewed.
    Text Styling
     Font size with <p style= size:...> (though just to a few values)
    <p style="color:blue;font-size:28px;">This is demo text</p>
     Text color with <p style= color:...>
    <p style="color:blue;">This is demo text</p>
     Italic type fact with <i>
     Bold typeface with <b>
     underlining with <u>
    Document Structure
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Title of html page </title>
    <! - - Contains information about the HTML document -->
    </head>
    <body>
    <! - - web page content - ->
    </body>
    </html>
    Thank You…!

    You might also like