Download to read offline
Uploaded byJafar Nesargi
Session1 gateway to web page development
This document provides an introduction to developing web pages. It explains that a web site's home page is the first page that opens and can span multiple servers. Web pages allow features like product catalogs and online ordering. The document outlines guidelines for web page design and colors and reviews the evolution of HTML markup language. It then details many common HTML tags for formatting text, images, and layout like headings, paragraphs, fonts, divs, lists and tables. The benefits of HTML are that it provides a simple formatting language to link web pages in a device-independent way, while limitations are a lack of programming capabilities.
More Related Content
Similar to Session1 gateway to web page development
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Session1 gateway to web page development
- 1. Gateway to Web Pagedevelopment
- 2. Gateway to WebPage Development / 2 of 26 Session Objectives Explain what is meant by a Web Sites List the purpose of a Web Site Explain how to Design Web pages Spell out the guidelines for making a Web Page Understand what HTML is
- 3. Gateway to WebPage Development / 3 of 26 Web Site and Web Page The first page which opens in a Web Site is the HOME page There is no restriction with respect to the site size One web site can span over more than one server also
- 4. Gateway to WebPage Development / 4 of 26 Features of Web Pages Web pages allow the following features : Product Catalogues Web Chat Online order tracking Online Demonstration Online Feedback System
- 5. Gateway to WebPage Development / 5 of 26 General Guidelines Avoid use of too many fonts Avoid too many colours on the same page Use pastoral colours in corporate and professional slides Use bright and sharp hues in kids and entertainment slides
- 6. Gateway to WebPage Development / 6 of 26 Evolution of HTML Markup Language -it refers to the tags which specify how to incorporate text, graphics, sound and the visual elements <HTML> <HEAD> …... </HEAD> <BODY> …… </BODY> </HTML> Heading Section Actual Text
- 7. Gateway to WebPage Development / 7 of 26 HTML Document <HTML> <Head> <Title>MY First HTML Document <H1> This is the heading of the document </H1> </Head> <Body> <P> Learn HTML fast and Easy</P> <P> My First Web Page</P> </Body> </HTML> Output in Browser
- 8. Gateway to WebPage Development / 8 of 26 Sample HTML <HTML> <HEAD> <TITLE>LOOK OF AN HTML DOCUMENT</TITLE> </HEAD> <BODY> “Welcome to the World of HTML” </BODY> </HTML> <TITLE>….<TITLE>Tag <BODY>…..</BODY> Tag
- 9. Gateway to WebPage Development / 9 of 26 HTML Tags Headline Tags Example <HTML> <HEAD> <H1> This Heading is created using H1 tag </H1> <H2> This Heading is created using H2 tag </H2> <H3> This Heading is created using H3 tag </H3> <H4> This Heading is created using H4 tag </H4> <H5> This Heading is created using H5 tag </H5> <H6> This Heading is created using H6 tag </H6> </HEAD> </HTML> Syntax <HTML> <HEAD> <H1>……….</H1> </HEAD>
- 10. Gateway to WebPage Development / 10 of 26 Paragraph Tag <P> ……. </P> Attributes ALIGN Attribute CENTER LEFT RIGHT Example <P> The paragraph text should be added here within the <P> tag. </P> Paragraph Formatting
- 11. Gateway to WebPage Development / 11 of 26 Font Settings Tags ATTRIBUTES FACE <FONT FACE=”ARIAL”> PARAGRAPH SPECIFICATION </FONT> Size <FONT SIZE=”5”> PARAGRAPH SPECIFICATION </FONT> Color <FONT COLOR=”Blue” PARAGRAPH SPECIFICATION </FONT> <FONT>……..</FONT> - Used for text Style Specifications
- 12. Gateway to WebPage Development / 12 of 26 Font Tags COLOUR HEXADECIMAL VALUE Red #FF0000 Green #00FF00 Blue #0000FF White #FFFFFF Black #000000 Gray #808080 Dark Red #800000 Dark Green #008000 Dark Blue #000080 Yellow #FFFF00 Magenta #FF00FF Cyan #00FFFF Color Attribute Face Attribute - Terminal for Times New Roman font - Arial - Arial Black - Courier - Fixedsys - Garamond - Impact - MS Sans Serif
- 13. Gateway to WebPage Development / 13 of 26 DIV Tag -Used for applying alignment and style characteristics to only a section of a document. DIV Attribute Align CENTER LEFT RIGHT The <DIV> Tag Syntax <DIV ALIGN=”Value” TEXT </DIV>
- 14. Gateway to WebPage Development / 14 of 26 An Example of <DIV> Tag <HTML> <BODY> <DIV ALIGN=RIGHT> <H1>Aligning a Block of Content to the Right</H1> <P>You can use a DIV tag to align a block of content to the right.</P> <P>The content can include anything you like, including tables, images, lists, and so on. Note, however, that right- aligned lists often do not look very neat.</P> </DIV> </BODY> </HTML>
- 15. Gateway to WebPage Development / 15 of 26 Multicolumn Text The MULTICOL tag places the text of the document into multiple, equal-width columns Syntax <MULTICOL COLS="Specifies the number of text columns for the text" GUTTER="Specifies the distance between the text columns, by default is 10 pixels" WIDTH="Specifies the width of each column and the width of each column is the same” > text in the document </MULTICOL>
- 16. Gateway to WebPage Development / 16 of 26 Horizontal Line <HR> Tag Attributes WIDTH SIZE Syntax <HR> Paragraph Specification <HR> Example Width Attribute <HR WIDTH = “50%” > Size Attribute <HR SIZE = “4” >
- 17. Gateway to WebPage Development / 17 of 26 Body Attribute BGCOLOR <BODY BGCOLOR = “#FF0000”> BODY TEXT <BODY TEXT = “#FF0000” > Text is displayed in red
- 18. Gateway to WebPage Development / 18 of 26 Text Formatting Super Script - <SUP> …. </SUP> <P> This Is My 7 <SUP> th </SUP> Program Using HTML </P> Sub Script - <SUB> …. </SUB> <P> H<SUB>2</SUB>O Is The Chemical Name For Water</P> Strike effect - <STRIKE>…….. </STRIKE> tags. <STRIKE> This Text Will Appear With Strike Effect </STRIKE> Preformatted text - <PRE> …... </PRE> tags.
- 19. Gateway to WebPage Development / 19 of 26 Benefits of HTML HTML is a simple but powerful formatting language to use. The Web pages can be linked together using links. HTML documents are device independent.
- 20. Gateway to WebPage Development / 20 of 26 Limitations of HTML No programming capabilities Does not provide anything more than formatted text, pictures and sound
- 21. Gateway to WebPage Development / 21 of 26 Session in brief In this session we covered: Definition of a Web Site Design issues in web sites Development Phase The HTML tags Body Attributes in HTML Text Formatting The benefits and limitations of HTML