Web Design and Publishing

Web Design and Publishing

1. This unit is designing to train students in website building. Students will learn HTML, CSS, jQuery, web design development programs like Adobe Photoshop, flash, as well as the multimedia program iMovie. This chapter will cover the usage of graphics, sound and video and discuss the appropriateness of multimedia on websites for journalism, advertising, public relations and e-commerce

   • Web Design Programming
     • HTML
       • is a language for creating Web pages. HTML stands for HyperTextMarkupLanguage.It is not a programming language, it is a markup language
     • PHP
       • is stands for HypertextPreprocessor (PHP) are a type of programming language whose main job is to allow the web developers to make a dynamic and vibrant content that reacts with the available databases
     • CSS
       • is stands for Cascading Style Sheets. These sheets refer to the presentation of HTML elements as a distinct file known as CSS file with an .css extension.CSS helps to change formatting of any HTML element by simply rolling out improvements at one place.
     • Bootstrap
       • Itis a “powerful mobile first front-end framework for faster and easier web development
     • JavaScript
       • JavaScript is a lightweight, deciphered programming dialect with object-oriented capacities that enables you to incorporate intelligence with generally static HTML pages.
   • Introduction to HTML
     • HTML is a unique language. It is a simple and text - based language. It is used for creating web page. HTML document is created in a simple Text Editor (as a notepad) A Website is a collection of webpages. Websites are unique sources of online information.
       • TYPES OF HTML TAGS
         • Tags are a special type of instructions. They are used in HTML documents. Tags provide instruction to browser for specific action. Tags start with open angle bracket (<) and end with closed angle bracket (>). The starting and closing tags of a HTML document are <HTML> and </HTML> respectively.
           • Container Tag
             • It is used twice in a document. Text is written in between the two tags
               • Example : <Body> …………………………………… …………………………………… </Body>
                 • Here two tags are used <Body> is the initial tag while </Body> is final tag.
           • Empty Tag
             • Empty tag is a single tag. It is also named as singular tag. It does nothave any companion tag.
               • Example : ……………………… ………………………<BR>
                 • The tag <BR> is used in above example. The tag <BR> represents "Break".
       • STRUCTURE OF HTML TAGS
         • The general structure of HTML document has two sections: Head section and Body section.
           • head
             • The Head section contains the Title that identifies the first part of your HTML coded document
           • Body
             • The body section is where you do most of the works that includes text, graphics, and other HTML elements that provide control and formatting of a page like: fonts, paragraph, list and other elements. The general syntax of HTML document
         • LIST & TABLE TAGS
           • HTML Unordered Lists
             • An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag.
           • HTML Ordered Lists
             • If you are required to put your items in a numbered list instead of bulleted list then HTML ordered list will be used. This list is created by using <ol>tag
           • HTML Definition Lists
             • HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia
         • LINK TAGS
           • A webpage can contain many links that take you directly to other pages and even specific parts of a given page.
             • Linking Documents
               • A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.
             • Linking to a Page Section
               • You can create a link to a particular section of a given webpage by using name attribute. This is a two-step process. First create a link to the place where you want to reach within a webpage and name it using <a...> tag as follows: <h1>HTML Text Links <a name="top"></a></h1>
             • Linking to email address
               • You can link with an e-mail address by using an Anchor Tag with this a user can send e-mail to you by clicking on the link.
             • Linking to Image
               • With this you can link the other document through an image (diagram). In this case image file name and its proper format is written. Let us try to understand the code given below: <AHREF=link.html><imgsrc = "pc.jpg"></ A>. Here link.html is the name of the document to be linked.
       • BASIC TAGS OF HTML
         • Head Tag
           • Head tag provides Header information. The document title is written in Head Tag. It always occurs in pair. Head Tag is considered very important for a web page. This is a container tag. e.g. <head>……………..</head>
         • Title Tag
           • The title of the web page is written with the help of title tag. Title starts with <TITLE> tag and ends with </TITLE> tag. It is used between Head tag. e.g. <title>……………..</title>
         • Body Tag
           • It is a container tag. It is used to represent the body of document. The whole text matter of the page is written between <BODY> and </BODY> tags. e.g. <body>……………..<body> Each Body tag has different characteristics. These characteristics (properties) are termed as attributes. We can select Background colour, text colour, font size etc. with these attributes. e.g. <BODYBGCOLOR = "Red"> ……………………………… </BODY> BG color is an attribute m the above example, which depicts that colour of the background is fixed as red.
         • Heading Tag
           • The heading tag is used to fix the heading. These are 6 levels of heading in all. The levels are numbered as heading 1 to heading 6. All the letters of the heading in a given level have same font. The font size goes on decreasing as we move from heading 1 to heading 6. The heading in level 1 is expressed by tags <Hl> and </Hl>. Similarly in the heading in level 2 we use the tags <H2> and </H2>. <H6> is lowest level. The font size in it is the smallest. e.g. <Hl> Computer Education </Hl>
         • Paragraph Tag
           • Paragraph is the basic composition of HTML, Paragraph is started with <P> tag and closes with </P> tag. The tags <P> leave a space equivalent to one line between previous line and the following line. e.g. <p>This is a paragraph </p>
         • Line Break
           • The line Break tag is used to start the text from the new line. This tag does not leave a blank line space as the paragraph tag does. The text jumps to new line on using line break tag. The tag <BR> is a symbol for line break.
       • FONT TAGS OF HTML
         • Font is pre-defined style and size of the text. Font has three main properties. First style second - size and third colour. Font style can be changed in three ways - Bold, Italic and Underline.
           • Attributes
             • Font has many attributes :- (a) Face : To set the name of font (b) Size: To set Font size. Font Size 3 1s commonly used we can change it from 1 to 7. (c) Color: To change the colour of the font
           • FONT STYLE
             • BOLD
               • The Bold tag specifies that the text should be displayed in bold face. Syntax: <B> ................... </B>
             • ITALIC
               • The Italic tag specifies that the text should be displayed using the italic font. Syntax: <I> ...................</I>
             • UNDERLINE
               • The Underline tag states that the enclosed text should be underlined. Syntax: <U> ...................</U>
             • BIG:
               • The Big tag specifies that the enclosed text should be displayed using a bigger font (compared with the current font). Syntax: <BIG> ................... </BIG>
             • SMALL:
               • The Small tag specifies that the enclosed text should be displayed using a smaller font (compared with the current font).
             • BLINK
               • Surrounding any text with this element will cause the selected text to blink on the viewing page. Syntax: <BLINK> ...................</BLINK> The <BLINK>< /BLINK> element is currently only supported by the Netscape Navigator browser. In the internet explorer <marquee> is used to get the same effect.
             • STRIKE
               • The Strike tag states that the enclosed text should be displayed with a horizontal line striking through the text. Syntax: <STRIKE> . . . <; STRIKE>
             • SUBSCRIPT
               • The Subscript tag specifies that the enclosed text should be displayed as a subscript using a smaller font (compared to the rest of the text). Syntax: <SUB> ... </SUB>
             • SUPERSCRIPT:
               • The Superscript tag specifies that the enclosed text should be display as a superscript using a smaller font (compared to the rest of the text).Syntax: <SUP> ... </SUP>
             • TYPEWRITER
               • This tag specifies that the text should be rendered in fixed-width typewriter font. Syntax: <TT> ... </TT>
   • STEPS OF CREATE WEBPAGE
     • In this section, we will be working with the notepad as editor. Now we are writing a HTML program to display a message “This is my First webpage” on the Browser.
       • 1. In windows, click START Button.
         • 2. Navigate to PROGRAMS and then click on ACCESSORIES.
           • 3. Click on NOTEPAD
             • 4. A NOTEPAD window will appear. Now, you are ready to type the HTML code.
               • 5. Type the HTML code in your Notepad window as shown in the figure below.
                 • 6. Save the File
                   • 7. After you have typed the HTML code, you have to save it as a HTML file. Click on the File menu (in Notepad). Select Save
                     • 8. In the File name textbox, type “First.html or First.htm”. Click on save button.
                       • 9. Then you opened the browser Internet explorer. (Start All programsInternet Explorer  ) or Double clicked on Internet explorer Icon on the Desktop or taskbar.
                         • 10. Once the browser window is opened, then you opened the file from the particular location that you will recall it “First.html”. (FileopenbrowseSelect the file (First.html)openok)
                           • 11. The output is shown as per the following figure.

2. MULTIMEDIA TAGS

   • You can open any external image in your webpage. Similarly external sound and movie (film) etc. can also be viewed. Anchor tag is used for viewing image or movie. HREF attribute can be used in Anchor tag let us understand the method of opening an external image in a different document:

3. Web Site Development & Publishing

   • Static Websites
     • are also known as flat or stationary websites. They are loaded on the client’s browser as exactly they are stored on the web server
   • Dynamic Websites
     • shows different information at different point of time. It is possible to change a portion of a web page without loading the entire web page

4. Web Page Anatomy

   • Containing Block
     • Container can be as page's body tag, an all containing div tag. In the absence of container there wont be any place to put the contents of a page.
   • Logo
     • Logo alludes to identity of a website and is utilized over an organization's different types of advertising, for example, business cards, letterhead, broachers et cetera.
   • Navigation
     • The important criteria of the site’s navigation system should be such that it should be convenient to find and use. On an often the navigation is just placed at the top of the page on the extreme right.
   • Content
     • The content on a web site ought to be significant to the goal of the web site
   • Footer
     • Footer is situated at the base of the page. It for the most part contains copyright, contract and legal information and in addition few links to the primary sections of the site.
   • Whitespace
     • It is also known as negative space and refers to any area of page that where there is no coverage of any type or illustrations.

Images and files in the map