Digital Content Creation Web Designing Fundamentals ~ Learners Encyclopedia

Introduction to Web Design & HTML

You have surfed several websites, exchanged emails, performed online transactions, etc. in the previous sessions. If you want to create websites like the ones you have seen, you need to learn a variety of technologies, tools and techniques. Web designing refers to the skills that are required to create and manage websites. Web design as a whole refers to designing a user interface, authoring (programming) or a combination of both. Designing a website requires multiple skills. However, it is recommended to master and become skilled in one particular technology once you get a taste of various technologies involved.

Following topics are covered in this module:

HTML & CSS

Web Authoring Tools, Microsoft Expression Web

Overview of Client-side & Server-side scripting, JavaScript & VBScript

A number of markup languages such as HTML, DHTML, XML are used to create web based content. Apart from these, software products such as FrontPage, Dream Weaver; etc. are also used to develop web based content. Web based applications are built using technologies such as ASP (Active Server Pages), JSP (Java Server Pages), PHP (Hypertext Preprocessor),ASP.net etc. HTML or Hypertext Markup Language is a language used for created web pages that can be viewed in a web browser.

Hyper - means active and all over the place! When you use a Web browser, you can move all over the place, without a specified order as to how to access pages/sites.

Text - You will be working with text files only.

Markup - To create a Web page, you will type in the text and then Mark up the text.

Language - This is a method of creating something or communicating and in this case, you are creating Web pages using a particular syntax.

HTML elements are the building blocks of a website. Web browsers interpret the

Tags written in HTML and display a web page. Hypertext refers to the text that can be linked to another text or page which a user can access. Hypertext is the underlying concept behind the World Wide Web. HTML is developed and maintained by World Wide Web Consortium abbreviated asW3C. When HTML was first released, there were a handful of tags available and used for basic web page structures. As time evolved, several new tags and attributes were introduced.

Popular HTML versions include HTML 4.01 and HTML 5.0.

All you need is a text editor such as notepad to create a web page using HTML. HTML files have the extension .htm or .html. You can open the web pages using web browsers such as Mozilla Firefox, Internet Explorer, Google Chrome, etc. Web browsers have the ability to display the source code used for a web page. You can use this to enhance your knowledge. To view the code, do the following:

1. Open the Web Browser and right-click anywhere in the web page and select View

Page Source from the context menu similar to the one below:

2. Notice, the source code of the web page is visible with different color codes.

The colors have no meaning in terms of function and are only used to differentiate different sets of code.

You can save web pages for future reference using the following procedure:

1. Select File > Save Page As.

2. Type a file name and click Save.

When you work with a document, you create headings, sub-headings, tables, etc. to give the document a structure. Similarly in HTML, tags or elements are used to create a web pages' structure.

Designing Web pages using HTML

Viewing Source Code

Saving a web page

HTML Elements & Attributes - The Basics

Look at an example of an online magazine. Online magazines have articles with text content, images, videos, links or continuation to related articles, advertisements, etc. They appear as a single web page to visitors. Have you noticed that the headings are of varying sizes to indicating topics and sub-topics and different from the content?

All this formatting is possible using combinations of several HTML elements. Elements have content placed between a start tag and an end tag. Tags act as containers for text, images and other types of content. Tags start an opening tag and end with a closing tab, using angle brackets (<>) to define the structure.

Note: To learn to use the tags, throughout this document, you will find examples of code displayed within dotted boxes. Copy it in a text editor, save it in your local computer and view using web browsers.

HTML uses tags enclosed in angle brackets; most tags are used in pairs such as <html></html>, etc. Following is a simple example of HTML code:

< ! DOCTYPE html>

< html >

<head>

<title>Learn HTML</title>

</head>

<body>

<p>Hello World! </p>

</body>

</html>

Elements & Attributes

Writing your First HTML Code

In the above mentioned code, there are a few HTML tags used. All HTML documents start with <html> and end with </html>. The rest of the document contains other elements and web page content placed using elements.

Document type or DOCTYPE is an element used for indicating the version of HTML used in a web page. This is used by the web browser to apply a set of rules for understanding the document structure. HTML element indicates the start and end of an HTML document. <HTML> indicates the beginning of this HTML document and </HTML> indicates the end. HTML is also the root of an HTML document and has two parts, Head and Body elements. Head element represents the header section of a document and contains information about a web page. Head elements start with <head> and end with </head>. This element includes all other elements that need to be executed or understood before the content (included in the body element) is displayed to the user.

Content placed within the <Title> and </Title> element is displayed as the title of a web page and used by search engines to create indexes of content. Body element represents the section that contains body content and is displayed in the web browser. Most HTML elements are used within the body element between <body> and </body> tags. If you want to place hidden text in a web page, you can use the comment element ( tags). Text placed using comment element will not be displayed in a web browser but can seen when viewing the source code. This is useful to developers or users who would like to share their experience in writing HTML code but hide the text from general visitors. Attribute are used to provide additional information about an element. Attribute contains values and some elements use multiple attributes.

HTML Attributes

Nesting

Text formatting

You can nest other elements within elements. Elements nested within another element are referred to as a child elements and the nesting element is referred to as a parent element. When you nest elements, you need to ensure the elements are used in proper order. Observe the correct way of using opening and closing tags illustrated in the figure below:

You can format the text content of a web page to make it attractive by using other HTML elements such as Headings, Bold, Italics, etc. In heading there are six levels of heading elements from H1 to H6. H1 has the largest text size and H6 has the smallest heading text size. Emphasize To emphasize a particular text in a sentence (for example a text that should be pronounced different), use this element. Text enclosed within <em> and <lem> are displayed in italics. Italics if you want the text to be displayed in alternate voice such as a text translated from a foreign language, technical words or present text in typographic italics, enclose the text within <i> and </i> elements.

Html Elements & Attributes - Text Formatting

Strong If you want to emphasize a text with stronger importance in a sentence, use the strong element. Text enclosed within <strong> and </strong> are displayed in bold. Bold To make the text such as keywords visually bold, enclose the text within <b> and </b>, the bold element. Underline To underline the text, enclose the text within <u> and </u>, the underline element. Mark To highlight the text in a sentence, enclose the text within mark

Element : <mark> and </mark> Big If you want to display a particular text in a sentence bigger than rest of the text in a sentence, enclose the text within the big element : <big> and </big>.

Small to display a particular text in a sentence as smaller than the rest of the text in a sentence, enclose the text within the small element: <small> and </small>.

Subscript & Text enclosed within <sub> and </sub> are displayed as subscripts superscripts and Text enclosed within <sup> and </sup> are displayed as superscripts.

Pre Text enclosed using <pre> and </pre> tags are displayed as it is (in the example below - using a mono-space font such as Courier)

INS & DEL Text enclosed within <del> and </del> are displayed as struck out while text enclosed within <ins> and </ins> is underlined. Break To separate single lines or use multiple line spacing, use the break element. Breaks between lines are represented through use of <br>. No closing tag is needed. HR To separate sections, use a horizontal line to indicate distinctiveness. Horizontal line is indicated through use of <hr> element and requires no closing tag.

<!DOCTYPE html>

<html>

<head>

Sample Code - Text Elements

<title>Learn HTML</title>

</head>

<body>

<p> HTML supports six levels of headings, H1 to H6 with H1 being the largest.</p>

<h1>Main Heading</h1>

<h2>Sub heading, Level 1</h2>

<h3>Sub heading, Level 2</h3>

<h4>Sub heading, Level 3</h4>

<h5>Sub heading, Level 5</h5>

<h6>Sub heading, Level 6</h6>

<p> You are required to <em>agree</em> with our terms and conditions.</p>

<p> <i>HTML</i> is simple to learn.</p>

<p>It is important to know the common <strong>HTML Elements and attributes.

</strong></p>

<p>This an example of text displayed in <b>bold</bold>.</p>

<p>This an example of text displayed <u>underlined</u>.</p>

<p>This is an example of highlighted <mark>text.</mark></p>

<p><big>Sun</big> is the largest of all planets with 696,000 KM as it’s radius.</p>

<p><small>Mercury</small> is the smallest planet in the Solar System ever since Pluto

lost its status and was reclassified as a dwarf planet.</p>

<p>this is an example of subscript for a formula, H<sub>2</sub>O</p>

<p>this is an example of superscript for a formula, (A+B)<sup>2</sup></p>

<pre>

/* Hello World program */

#include<stdio.h>

main()

{

printf("Hello World");

}

</pre>

<p>this is the correct spelling of <del>entreprenaur</del>

<ins>entrepreneur</ins></p>

</body>

</html>

Information Technology Level -2

Referencing Elements

Sample Code - Referencing Elements

Element Description

Quote To include short text such as name of an author, publisher, etc. in quotes, use the quote element. You can also use the cite attribute to indicate the source. Text included within <q> and </q> is displayed

within quotations. Block quote to include lengthy quotes, include text within <blockquote> and </blockquote> elements. Cite To specify a tile of a work such as title of a book, movie, painting, etc. include text within <cite> and </cite> elements.

Abbreviation To include abbreviations of acronyms, include the abbreviation between <abbr> and </abbr> elements. Text included within this element will be displayed when the cursor is moved over the text.

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title>

</head>

<body>

<p>HTML Tutorial

<q>Created by Author Name</q>

<blockquote cite="http://en.wikipedia.org/wiki/Google_Analytics"> Google Analytics (GA)

is a service offered by Google that generates detailed statistics about a website's traffic and

traffic sources and measures conversions and sales.</blockquote>

<p>You can learn more about web design at <cite>

http://en.wikipedia.org/wiki/Web_design</cite>

<p><abbr title=" Hypertext Markup Language">HTML</abbr> has several elements and

attributes. </p>

</p>

</body>

</html>

Information Technology Level -2

Tables images

You can create a table using the Table Element. Tables are made of rows and Columns similar to that of a spreadsheet. Rows are contained within table row element <tr> and data is stored within row element <td>.

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title>

</head>

<body>

<table>

<tr><td>Anand</td><td>17</td><td>Delhi</td></tr>

<tr><td>Rohit</td><td>23</td><td>Bangalore</td></tr>

</table>

</body>

</html>

You can include images in your web page by using the <img> image element. Use the SRC

attribute to specify the location of the image and width and height attributes to specify the

dimensions of the image. Also it is a recommended practice to use the ALT attribute for

displaying text if the image is not downloaded.

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title>

</head>

<body>

<img src="HTML5-logo.png" alt="HTML 5 Logo, is not displayed due to an error.

Please reload this page or contact the website administrator" width="300"

height="300">

</body></html>

Information Technology Level -2

Working with Audio, Video & Flash

Element Description

Audio To include an audio clip, enclose the audio within the <audio> and </audio> elements and point to the clip using SRC attribute. To automatically play the audio, use the auto play attribute. To display controls, use the controls attribute. Video To include a video clip, enclose the audio within the <video> and </video> elements and point to the clip using SRC attribute. Also use width and height attributes to specify the dimensions of a video clip. Flash To embed a flash animation, use the <embed> and </embed> elements and point to the animation using SRC attribute.

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title>

</head>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title>

</head>

<body>

Your browser does not support the Video element.

</video>

</body>

</html>

Information Technology Level -2

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title>

</head>

<body>

</body>

</html>

You can also include videos from other sources such as youtube.com, etc. To include a video

from youtube.com, do the following:

1. Go to Youtube.com

2. Select a video clip

3. Right-click on the video and select Copy embed html

Write the code within <body> and </body> section (sample below).

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title>

</head>

<body>

src="http://www.youtube.com/embed/v4oN4DuR7YU?feature=player_detailpage"

frameborder="0" allowfullscreen></iframe></body>

</html>

Now save and open this web page using a web browser.

Information Technology Level -2

Html Elements & Attributes - Forms & Frames

Forms

Sample Code - Forms

Forms contain input elements such as text boxes, dropdown menus, check boxes, radio buttons, etc. to collect information from visitors and sent to a web server for further processing such as displaying search results or send to a database for storage. Forms are created using <form> element along with action and method attributes.

Action attribute is used for specifying the URL to where the data needs to be submitted. Method attribute is used for specifying the HTTP method, get or post. POST attribute is used for storing or updating a database or for sending emails and GET attribute is used for retrieving data. Form element uses text boxes to collect text information and radio buttons, check boxes and dropdown menus for collecting information through pre-defined options. Textbox Single-line text input box is typically used for collecting shorter text such as usernames or passwords. Multiple-line text input boxes are used for collecting length of their text such as narrative feedback, etc. Radio Buttons Used for collecting single value from multiple values. You should use type=radio attribute for using radio buttons in a web page. Checkbox Used for collecting multiple values. You should use type=checkbox attribute for using checkboxes in a web page. Dropdown Used for collecting single or multiple values from a dropdown menu.

You should use the option attribute along with values to present multiple options.

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title>

</head>

<body>

<p>Subscribe to your weekly Newsletter</p>

Name <input type="name" name="Name" size="30">

Password <input type="password" name="Name" size="30">

<p>I agree to the Terms and Conditions.

<input type="radio" value="Agree" name="R1"> Yes

0<input type="radio" value="Disagree" checked name="R1"> No</p>

<p>10th <input type="checkbox" name="Class_10" value="ON"> 12th

<input type="checkbox" name="Class_12" value="ON"> Bachelor’s Degree

<input type="checkbox" name="Bachelor’s Degree" value="ON"> Master’s Degree

<p>This is an example of Dropdown Menu (Single Selection) </p>

<p>School Education Board<select size="1" name="School">

<option>State Board</option>

<option>Matriculation</option>

</select> </p>

<p>

</form>

</body>

</html>

Frames are used to display one or more pages within a single web page; collections of different frames are referred to as a frameset. Frames are used when you want to display different pages as a single page in a web browser.

Frames

<html>

Text to be displayed in browsers that do not support frames

</noframes>

</frameset>

</html>

iframe or inline frames is an element used for embedding another document or an URL

with a web page.

<!DOCTYPE html>

<html>

<head>

<title>Learn HTML</title></head>

<body>

<p>You can use iframe to include a web page.</p>

<hr>

<p>You can use iframe to view another website live.</p>

<hr>

<p>You can restrict scrolling in iframe.</p>

scrolling=no></iframe>

</body>

</html>

Learners Encyclopedia

Digital Content Creation Web Designing Fundamentals

0 comments:

Search This Blog

Popular Posts

Pages

About The author