web technology html tags and uses PDF

Preview

Summary

Assignment No. 1 Aim: Design web pages for college containing a description of the courses, departments, faculties, library etc, use href, list tags. Objective: To learn about creation on web page, hyperlinks tables. Theory: About HTML HTML (HyperTextMarkup Language) is the most basic building block...

Description

Assignment No. 1 Aim: Design web pages for college containing a description of the courses, departments, faculties, library etc, use href, list tags. Objective: To learn about creation on web page, hyperlinks & tables. Theory: About HTML HTML (HyperTextMarkup Language) is the most basic building block of the Web. It describes and defines the content of a webpage along with the basic layout of the webpage. Other technologies besides HTML are generally used to describe a web page’s appearance/presentation (CSS) or functionality/ behaviour (JavaScript). "HyperText" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as, , , , ,, and many others. Tags in HTML are case insensitive. That is, they can be written in uppercase, lowercase, or a mixture. Example tag can be written as , or in any other way. HTML tags are used for presenting and formatting text on a webpage. The tags and their respective attributes are used to create HTML documents that can be viewed in browsers. HTML, or HyperTextMarkup Language, was first released in 1993. The most current version is HTML 5, which was released on February 4, 2014.HTML was developed by the World Wide Web Consortium and the Web Hypertext Application Technology Working Group in 1993, who continue to oversee its development till today. The World Wide Web Consortium, or W3C for short, is headed by Sir Tim Berners-Lee, who was also the first person to implement HTML. HTML tags, also known as HTML elements or HTML codes, are used to format content on the webpage. HTML is an abbreviation for Hypertext Markup Language. Anyone who uses the Internet for marketing their services or even for personal use, uses this language to add creativity to their webpages. In the following table, one will find a comprehensive list of HTML tags. HTML TAG

WHAT IT DOES This tag, also known as the comments tag, is used to hide comments and text from showing up on the final page. It is mostly used by coders to insert comments

in various sections of the page for their reference, and make such comments not visible to end users, and in the browser. This is the document type tag, which is actually not a tag, but a declaration of the version of HTML that is used. It is to help the browser understand the version and type of web page, without which the browser would not be able to even recognize

the webpage. The document type tag does not have an end tag. The anchor tag, as this tag is called, interconnects two pages (unidirectional) with the help of a page address. The link of the interconnected page needs to be

inserted as part of the href attribute, which makes the text accessible, and directs you to the said page on clicking the linked text. The bold tag is used, as the name suggests, to make text bold, or stand out from other text on a webpage. Similar to the bold effect found in most word processing

programs. This tag helps you define bigger text, or increase the size of the text. The big tag

is not supported in HTML 5. This tag is used to specify a section that is quoted from another source. The

attribute cite needs to be used to define the source of the content. The body tag displays all the content of an HTML document, such as text,

hyperlinks, images, tables, lists, etc. This tag lets you add a line break to the text. It puts anything that comes after it on a new line. The line break tag is an empty tag, meaning it has no end tag. The button tag defines a clickable button. Inside this tag you can put content, like

text or images. The center tag is used to align elements or text to the center of the page. This tag

is not supported in HTML 5, CSS properties need to be used instead. The div tag defines a division or a section in an HTML document. HTML 5 segregates between the section, article, and other parts of a page, whereas in

HTML 4 and before, this tag was used substantially to section and structure the page. In HTML 4.01, the dl tag defines a definition list. In HTML 5, the dl tag defines a

description list.

The dt tag defines a term/name in a description list.

The em tag is a phrase tag. It renders emphasized text. Similar to the italics tag. The embed tag is similar to the applet tag, which allows a third party plugin to be

inserted into a page. This external plugin adds application or interactive content onto a page. This tag is similar to the basefont tag, except it applies the font style to the

content and elements within the tag, and not across the whole page e.gIT The footer tag defines a footer for a document or section. Footer naturally

specifies the author and copyright information, among other things. You can have several footer elements in one document. The form tag is one of the most important aspects of interactive pages. It is used

to create an HTML form for user input. This tag allows the author to open a new webpage within a webpage. There can

be multiple frames within a page, contained in a frameset. The frameset tag is used to contain frames (x number of webpages within a page).

The frameset element specifies the columns or rows in the frameset, and the percentage/pixels of space occupied by each frame.

As the name states, the head tag is mainly responsible for the functioning of the

body. The head tag includes all the script and style elements, and must include a title for the document The header tag specifies a header for a document or section. The header element

should be used as a container for introductory content or a set of navigational links. The h1 to h6 tags are used to define HTML headings. They add highlight and font to style to let the heading of the section stand out. h1 defines the most important heading, while h6 defines the least important.

The hr tag defines a thematic break in an HTML page (e.g., a shift of topic). The HTML tag tells the browser that this is an HTML document. This tag is the

container for all other HTML elements (except for the tag). The italic tag is used to highlight important words or sentences within text.

Similar to the Italic text found in most word processing programs. The iframe tag helps you to insert a frame in any HTML document. It does not

require a framset container. This tag defines images in an HTML document. A source and an alt are

mandatory attributes of this tag. Technically, they are not inserted, they are the source of the image linked to the tag. As the name suggests, an author can accept inputs from users making a page

interactive, using this tag. It is used within the form tag. The label element does not render anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on

the text within the label element, the cursor focus is shifted to the relative input element. For this functionality the "for" attribute is used on label. The li tag defines a list item, and is used in ordered lists (ol), unordered lists (ul), and in menu lists (menu). As the name states, this tag creates a link with an external source. It can be a file

of any format. The main tag, as the name states, highlights the most important content of the document. This content cannot be repeated anywhere throughout the document. It

is designed to show screenreaders and assistive technologies exactly where the main content begins. It could also be used for content syndication, where mobile browsers could zoom in when encountering non-responsive websites. The map tag is used to define a client-side image-map, wherein an author can

make a part of image clickable.

This tag lets you highlight the text in a document. Ordered list; lets you have a list of elements with a numbered or alphabetical

bulleted list. The p tag defines a paragraph on the page. This tag lets you used preformatted text, where the user can define or print text on

page 'as is' written inside the tag. It preserves line breaks and spaces, hence the br tag is not required.

The q tag defines a short quotation. Browsers normally insert quotation marks



Inline Styles This is a heading CSS Colors

Hello World Hello World Hello World ... ... ... ... ... rgb(red, green, blue) #rrggbb(Hex Value) hsl(hue, saturation, lightness)

rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): CSS TEXT text-align: center; text-align: justify; text-decoration: overline; text-decoration: line-through; text-decoration: underline; text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

text-indent: 50px; letter-spacing: 3px; letter-spacing: -3px; line-height: 1.8; direction: rtl; word-spacing: 10px; text-shadow: 3px 2px red;

CSS Font

Font Style font-style: normal; font-style: italic; font-style: oblique; font-size: 40px; font-size: 2.5em; /* 40px/16=2.5em */ font-size: 100%; font-weight: normal; font-weight: bold; font-variant: normal; font-variant: small-caps;

Conclusion: Created webpage which contain different cascading style sheets.

Assignment No. 5 Aim: Write a program to design Student registration form for students by using HTML and CSS. Objective: Understand CSS tags for creating a registration form. Theory: Styling Input Fields Use the width property to determine the width of the input field: First Name Example input { width: 100%; } The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:    

input[type=text] - will only select text fields input[type=password] - will only select password fields input[type=number] - will only select number fields etc..

Padded Inputs Use the padding property to add space inside the text field. First Name Example

Last Name

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } Bordered Inputs

Use the border property to change the border size and color, and use the border-radius property to add rounded corners: First Name Example input[type=text] { border: 2px solid red; border-radius: 4px; } If you only want a bottom border, use the border-bottom property: First Name Example input[type=text] { border: none; border-bottom: 2px solid red; }

Colored Inputs Use the background-color property to add a background color to the input, and the color property to change the text color: John

Example input[type=text] { background-color: #3CBC8D; color: white; } Focused Inputs By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input. Use the :focus selector to do something with the input field when it gets focus:

Example

input[type=text]:focus { background-color: lightblue; } Example input[type=text]:focus { border: 3px solid #555; } Input with icon/image If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:

Example input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; } Styling Textareas

Example textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; } Styling Select Menus

Example select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; } Styling Input Buttons Example input[type=button], input[type=submit], input[type=reset] { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; }

Conclusion: Created webpage which contain student registration form using html and different cascading style sheets.

Assignment No. 6 Aim: Develop a JavaScript to display today’s date. Objective: Understand the java script to display today’s date in various format.

Theory: JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development. JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time. JavaScript and Java are very much unrelated. Java is a very complex programming language whereas JavaScript is only a scripting language. JavaScript Data Types JavaScript variables can hold many data types: numbers, strings, objects and more: var length = 16; // Number var lastName = "Johnson"; // String var x = {firstName:"John", lastName:"Doe"}; // Object Var x = 16 + "Volvo"; var x = "16" + "Volvo"; When adding a number and a string, JavaScript will treat the number as a string. Example var x = 16 + "Volvo"; Example var x = "Volvo" + 16; JavaScript evaluates expressions from left to right. Different sequences can produce different

var x = 16 + 4 + "Volvo"; Result: 20Volvo var x = "Volvo" + 16 + 4; Result: Volvo164 Print a message in java script document.write(“ty”);

Reading inputs in javascript

Conclusion: Created a java script program which display current date in various format.

Assignment No. 7 Aim: Develop simple calculator for addition, subtraction, multiplication and division operation using JavaScript.

Objective: Understand the java script to design a calculator....