2 - Designing of Simple Web Pages

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>
• <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…!

2 - Designing of Simple Web Pages

Uploaded by

Copyright:

Available Formats

2 - Designing of Simple Web Pages

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2 - Designing of Simple Web Pages

Uploaded by

Copyright:

Available Formats

Faculty Of Engineering and Technology

Department of Computer Science

Web Page Designing

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

• Practically learn the web page designing.

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

You might also like