Web designing
0 likes123 views
HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text with information about formatting, links, lists, etc. Key points: - HTML documents have a head and body - the head contains metadata and the body contains visible page content - Common tags include headings, paragraphs, links, lists, images, forms, and tables - Additional technologies like CSS and JavaScript can be used to make pages more dynamic and interactive XML is a metalanguage used to define customized markup languages. It focuses on describing data rather than formatting. The main differences between HTML and XML are that XML tags are not predefined, case-sensitive, and more extensible. D
![Web Designing
Prof. K. Adisesha
1
0
WEB DESIGNING BLUE PRINT
VSA (1 marks) SA (2 marks) LA (3 Marks) Essay (5 Marks) Total
01 Question - 01 Question - 02 Questions
Question No 10 - Question No 26 - 04 Marks
Important Questions
1 Marks Question:
1. Expand the following:
a. HTML b. XML c. DHTML [June 2016]
2. What are HTML, XML, and DHTML?
3. Mention the use of HTML. [March 2015]
4. Write any one HTML tag. [June 2015]
5. What is DHTML? [March 2016]
6. What will be the extension of HTML language file?
7. What is the use of web page?
8. What is Script?
3 Marks Question:
1. Explain any three text formatting tags in HTML. [March 2015, March 2017]
2. Explain Anchor tag with syntax and example.
3. Explain different INPUT in HTML.
4. What is web hosting? Mention different types of web hosting. [June 2015, March 2016]
5. What is web scripting? Explain the different types of web scripting.
6. Write the difference between client side scripting and server side scripting.](https://image.slidesharecdn.com/webdesigning-191218163649/85/Web-designing-10-320.jpg)
Web designing
- 1. Web Designing Prof. K. Adisesha 1 WEB DESIGNING Introduction to HTML: HTML stands for Hypertext Markup Language, and it is the most widely used Language to write Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext. HTML documents are also called web pages. HTML Document Structure: A typical HTML document will have following structure: Document declaration tag <HTML> <HEAD> DOCUMENT HEADER RELATED TAGS </HEAD> <BODY> DOCUMENT BODY RELATED TAGS </BODY> </HTML> HTML Tags: HTML markup tags are usually called HTML tags. These tags are keywords (tag name) surrounded by angle braces like <Tag Name>. The first pair of tags is the start tag and the second tag is the end tag. End tag contains a forward slash before the tag name. Start tag and end tag are also called opening tags and closing tags. Except few tags, most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag. Tags Description <HTML> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <HEAD>...</HEAD> and document body which is represented by <BODY>...</BODY> tags. <HEAD> This tag represents the document's header which can keep other HTML tags like <TITLE>, <LINK> etc. <TITLE> The <TITLE> tag is used inside the <head> tag to mention the document title. <BODY> This tag represents the document's body which keeps other HTML tags like <H1>, <BR>, <P> etc. HTML Basic Tags: Tag Name Description Syntax Heading Different sizes for your headings <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. Paragraph Way to structure your text into different paragraphs. <P> ……. </P> Line Break It starts from the next line. <BR /> Horizontal Lines Used to visually break up sections of a document. <HR>
- 2. Web Designing Prof. K. Adisesha 2 HTML Text Formatting Tags: Tag Description Tag Description <B> Defines bold text <I> Defines italic text <EM> Defines emphasized text <U> Underline <STRONG> Defines strong text <SMALL> Defines small text <SUB> Defines subscripted text <SUP> Defines superscripted text <INS> Defines inserted text <DEL> Defines deleted text Example: <HTML> <HEAD> <TITLE> Text Formatting </TITLE> </HEAD> <BODY> <p>This text is normal.</p> <p><b>This text is bold.</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i> </p> <p><em>This text is emphasized.</em></p> <p>This is <sub>subscripted</sub> text.</p> <p>This is <sup>superscripted</sup> text.</p> <p>My favorite <ins>color</ins> is red.</p> <p>My favorite color is <del>blue</del> red.</p> </BODY> </HTML> HTML Images: Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. Insert Image: You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag. <img src="Image URL" ... attributes-list/> HTML Hyper Links: A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage. <A href=”filename.html” title=”Next page”> Next page</A> Anchor element allows you to link various Webpages or different sections on the same page. The syntax of Anchor element is given below: <A>………</A> The various attributes of the Anchor element are HREF, NAME, TITLE, TARGET and ALT HREF: The href (hyperlink reference) attribute specifies the location of the file or resource that you want to provide a link. Name: The name attribute specifies a location within the current or the existing document. Output
- 3. Web Designing Prof. K. Adisesha 3 Title: The title attribute specifies a title for the file, which you are providing a link. Target: The target attribute specifies a position in the webpage where the browser displays a file. Alt: The alt attribute specifies the alternative text, which is displayed when an image used as a hyperlink, is not displayed. HTML Lists: HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain: <UL> - An unordered list. This will list items using plain bullets. <OL> - An ordered list. This will use different schemes of numbers to list your items. <DL> - A definition list. This arranges your items in the same way as they are arranged in a dictionary. Example for HTML List: <html> <body> <h2>Ordered List with Roman Numbers</h2> <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> HTML Tables: The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. Basic TABLE tags: <TABLE> …….. </TABLE> This tag defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border. <CAPTION>……..</CAPTION> o This tag defines the caption for the title of the table. <TR>………. </TR> o This tag specifies a table row within a table. <TH>………. </TH> o This tag specifies a table header cell, by default, the text in this cell is bold and centered. <TD>………. </TD> o This tag specifies a table data cell, by default the text in this cell is aligned left and centered vertically. Example: <html> <head> <title> table elements </title> </head> <body> <table border="1"> <caption> Student Details </caption> <tr> <th>Regno</th> <th>Name</th>
- 4. Web Designing Prof. K. Adisesha 4 <th>Marks</th> </tr> <tr> <td>100</td> <td>Adisesha</td> <td>560</td> </tr> <tr> <td>101</td> <td>Suresh</td> <td>540</td> </tr> </table> </body> </html> Some of the attributes associated with various tags are: Attribute Description Syntax BORDER Draws a border around the table of certain pixels wide <TABLE BORDER=”4”> BGCOLOR Specifies the background colour of the entire table <TABLE BGCOLOR=”IVORY”> ALGIN (LEFT, CENTER, RIGHT) Identifies the horizontal alignment of a table <TABLE ALIGN=”LEFT”> <TABLE ALIGN=”CENTER”> <TABLE ALIGN=”RIGHT”> VALGIN (TOP, MIDDLE, BOTTOM) Identifies the vertical alignment of a table <TABLE VALIGN=”TOP”> <TABLE VALIGN=”MIDDLE”> <TABLE VALIGN=”BOTTOM”> CELLSPACING Specifies the space in pixels between cells <TABLE CELLSPACING=”4”> CELLPADDING Specifies the space in pixels between cell border and cell data <TABLE CELLPADDING=”4”> COLSPAN Allows a number of columns to be combined in a cell <TD COLSPAN=”2”> ROWSPAN Allows a number of rows to be combined in a cell <TD ROWSPAN=”2”> FORMS: A form is a web page, which allows the user to enter information; it also allows the user to interact with the contents of the form. To insert a form we use the <FORM> </FORM> tags. The rest of the form elements such as text boxes, check boxes, and pull down menus and so on must be inserted between the form tags. The form container works as follows: <FORM METHOD=”how to send” ACTION=”URL of script”> …form data….. </FORM> The <FORM> tag takes two attribute:
- 5. Web Designing Prof. K. Adisesha 5 METHOD: This attribute accepts GET or POST as its value. POST is by far the more popular, as it allows for a greater amount of data to be sent. GET is a little easier for web programmer to deal with, and is best with single response, like a single textbox. ACTION: It simply accepts the URL for the script that will process the data from your form. Difference between GET and POST Methods of Form: The POST method is used to send sensitive information’s such as password, credit card number etc. The GET method appends data along with the URL. It is less secure than POST method. <FORM> Elements: Form elements have properties such as Text boxes, Password boxes, Check boxes, Radio buttons, Submit, Reset etc. The properties are specified in the TYPE attribute of the HTML element <INPUT> </INPUT> <INPUT> Element’s Properties Element Description TYPE = This value indicates the type of INPUT entry filed which can include text, password and so on. NAME = It represents a variable name passed to CGI application. VALUE = The data associated with the variable name to be passed to the CGI application. CHECKED = This value indicates the Button/box is checked by default. SIZE = This value indicates the number of characters in the text field. MAXLENGTH = This value indicates the maximum number of characters that can be accepted. INPUT TYPES: TEXT BOXES: These boxes are used to provide input fields for text, phone, numbers, and dates and so on. o Example: <INPUT TYPE=”TEXT” NAME = “ Stud-Name” SIZE=”30”> PASSWORD: These boxes are used to allow the entry of passwords. o Example: <INPUT TYPE=”PASSWORD” NAME=”Secret”> CHECKBOX: These boxes are used to allow the user to select more than one option. o Example: <INPUT TYPE=”CHECKBOX”> RADIO Button: The Radio button allows user to select only one option among a list of options. o Example: <INPUT TYPE=”RADIO”> File Upload: You can use a file upload to allow users to upload files to your web server. o Example: <INPUT TYPE=”FILE” NAME=”file upload> SUBMIT: This is the element that causes the browser to send the names and values of the other elements to the CGI application specified by the CATION attribute of the FORM element.
- 6. Web Designing Prof. K. Adisesha 6 Output for the code o Example: <INPUT TYPE=” SUBMIT” VALUE=”Submit the Form”> RESET: It allows the user to clear all the input in the form. o Example: <INPUT TYPE=” RESET” VALUE=”Reset the Form”> Other Elements used in FORMS: Text Area: This element is enclosed by the tags <TEXTAREA> </TEXTAREA> it is an element that allows for free form text entry. Example: <TEXTAREA NAME=”Remarks” ROWS=”3” COLS=”50”> Please give your opinion here. </TEXTAREA> <SELECT> tag: The <SELECT> tag is used to create a drop-down list. The <OPTION> tag inside the <SELECT> tag defines the available options in the list. Example of FORMS: <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button,.</p> </body> </html> FRAMES: HTML Frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as Frameset. Creating Frames: To use frames on a page we use <FRAMESET> tag instead of <BODY> tag. The <FRAMESET> tag defines how to divide the window into frames. The row attribute of <FRAMESET> tag defines horizontal frames. The cols attribute of <FRAMESET> tag defines vertical frames. Each Frame is indicated by <FRAME> tag. Advantages of HTML: HTML document browser interfaces are easy to build. It is easy to learn. There are some specialized structures in HTML. Disadvantages of HTML: It is a weak presentation tool. Weak markup tool. It is very instable.
- 7. Web Designing Prof. K. Adisesha 7 XML: XML stands for eXtensible Markup Language. XML is a markup language for documents containing structured information. Structured information contains both content (words, pictures etc.) and some indication of what role content plays. XML is a text-based markup language that is fast becoming the standard for data interchange on the web. Difference between HTML and XML: HTML XML Hypertext Markup Language eXtensible Markup Language HTML is used to display data and to focus on formatting of data. XML is used to describe data and focus on what data is. HTML tags are predefined XML tags are not predefined (Create our own tag) HTML tags are not case sensitive XML tags are case sensitive HTML is not extensible XML is extensible DHTML: DHTML stands for Dynamic Hyper Text Markup Language. DHTML refers to Web content that changes each time it is viewed, for example, the same URL could result in a different page depending on any number of parameters, such as: geographic location of the user Time of day Previous pages viewed by the user Profile of the reader Dynamic HTML is collective term for a combination of HTML tags and options that can make web pages more animated and interactive than previous versions of HTML. Web Hosting: Web Hosting means of hosting web-server application on a computer system through which electronic content on internet is readily available to any web- browser client. Various types of web hosting services are: Free Hosting Virtual or shared Hosting Dedicated Hosting Co-location Hosting Free Hosting: This type of hosting is available with many prominent sited that offer to host some web pages for no cost. Virtual or shared Hosting: This type of hosting is where one’s own web site domain (ex: www.yourname.com) is hosted on the web server of hosting company along with the other web sites. Dedicated Hosting: In this type of hosting, the company wishing to go online rents an entire web server from hosting company. This is suitable for large, high traffic sites. Co-location Hosting: In this type of hosting, the company owing the site instead of web hosting company. Suitable for those who need the ability to make changes? Web Scripting: The process of creating and embedding scripts in a web page is known as web-scripting. Script: A Script is a list of commands embedded in a web page. Scripts are interpreted and executed by a certain program or scripting –engine.
- 8. Web Designing Prof. K. Adisesha 8 Types of Scripts: Client Side Script: Client side scripting enables interaction within a web page. The client-side scripts are downloaded at the client-end and then interpreted and executed by the browser. Some popular client-side scripting languages are VBScript, JavaScript, ActionScript. Server-Side Scripts: Server-side scripting enables the completion or carrying out a task at the server-end and then sending the result to the client –end. Some popular server-side Scripting Languages are PHP, Perl, ASP(Active Server Pages), JSP(Java Server Pages) etc. Useful HTML tags and their attributes
- 9. Web Designing Prof. K. Adisesha 9
- 10. Web Designing Prof. K. Adisesha 1 0 WEB DESIGNING BLUE PRINT VSA (1 marks) SA (2 marks) LA (3 Marks) Essay (5 Marks) Total 01 Question - 01 Question - 02 Questions Question No 10 - Question No 26 - 04 Marks Important Questions 1 Marks Question: 1. Expand the following: a. HTML b. XML c. DHTML [June 2016] 2. What are HTML, XML, and DHTML? 3. Mention the use of HTML. [March 2015] 4. Write any one HTML tag. [June 2015] 5. What is DHTML? [March 2016] 6. What will be the extension of HTML language file? 7. What is the use of web page? 8. What is Script? 3 Marks Question: 1. Explain any three text formatting tags in HTML. [March 2015, March 2017] 2. Explain Anchor tag with syntax and example. 3. Explain different INPUT in HTML. 4. What is web hosting? Mention different types of web hosting. [June 2015, March 2016] 5. What is web scripting? Explain the different types of web scripting. 6. Write the difference between client side scripting and server side scripting.