Web Design-1a PDF

WEB DESIGN-1- Dr. kamaran Faraj HTML elements can be categorized as container elements and empty elements. Container Elements: Tags which have both the opening and closing i.e. and are called container elements. The closing tag is the same as the opening tag, except for the slash (/) mark...

WEB DESIGN-1- Dr. kamaran Faraj HTML elements can be categorized as container elements and empty elements. Container Elements: Tags which have both the opening and closing i.e. and are called container elements. The closing tag is the same as the opening tag, except for the slash (/) mark. Container Elements hold the text and other HTML tags in between the tags. The , , and tags are all container tags. Example: This is a container tag. It holds both the text and HTML tag Empty Elements: elements which have no content are called empty elements. Empty elements do not have closing tags. , which is used to draw Horizontal rule across the width of the document, line break tags are empty tags. HTML Documents All HTML documents must start with a document type declaration: its instruction The HTML document itself begins with and ends with. The visible part of the HTML document is between and.  Web Terminology A Web server is a computer that is HTML programmed to send files to browsers on What is HTML other computers connected to the Internet. Parts of an HTML Document The Web browser, such as Firefox or Internet HTML Tags Explorer, is the client that sends a request for Required a Web page. Common The Web server answers the request and delivers the requested page to the browser so you can view it. HTTP Stands for HyperText Transfer Protocol Allows computers on the WWW to communicate with one another. Handles the “request” sent to the Web server and the “response” received from the Web server. 7 Some Common HTML Tags and Their Meanings … -- Creates a paragraph -- Adds a line break -- Separates sections with a horizontal rule … -- Displays a heading (h1-h6) -- Inserts a comment … -- Creates an ordered list … -- Creates an unordered list -- Inserts an image into the document … -- Inserts a link into the document 8 Web Servers and Clients The Web browser, such as Firefox or Internet Explorer, is the client that sends a request for a Web page. A Web server is a computer that is programmed to send files to browsers on other computers connected to the Internet. The Web server answers the request and delivers the requested page to the browser so you can view it. 9 Internet vs. WWW Most people use the two terms interchangeably but they are in fact different. The Internet is a huge, international network, made up of computers and the physical connections (wires, routers, etc.) allowing them to communicate. The World Wide Web (WWW or just the Web) is a collection of software that distances the Internet and enables the interlinking of documents and resources. Provides a way of accessing information on the Internet. 10 URLs Stands for Uniform Resource Locator Also called the Web page’s address You typically type it into your Web browser’s location bar when you want to view a Web page http://www.kurd.edu Protocol needed to Name of communicate with Web server Web server 11 HMTL stands for hypertext markup language useful for developing web pages. Using HTML we can add paragraphs, headings, images into web pages. Some HTML Tag Examples START TAG END TAG , ,... , ,... (optional) (optional) (none; "empty" tag) (optional) HTML Document Layout  Example of basic tag positioning Title bar text Look, I'm a paragraph!  Always think containers! ◦ Tag pairs that enclose content  1) it must be in the beginning 2) 3) tap or 4 space before head 4) another tap or 4 spaces before 5) 6) index 7) This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Without the viewport meta tag With the viewport meta tag  HTML Attributes Some of HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value" HTML Attributes HTML elements can have attributes that provide additional information about an element. Attributes are always specified in the start tag and come in name value pairs like: name=“value”, eg: HEAD Element The Head element contains an unordered collection of information about the HTML document. It comes after the HTML start tag. It contains TITLE element to give the document a title that displays on the browsers title bar at the top. BODY Element  Attributes used with BGCOLOR: used to set the background color for the TOPMARGIN: set the top margin of document. the document. Example: Example: