CHAPTER TWO HTML 1. General concepts of Web design ‘As a web designer, you spend a lot of time creating pages and change them until they look good in your browser. Before you grow too attached to the way your page looks on your screen, you should know that it is likely to look different to other people. That's just the nature of web design—you can't guarantee that everyone will see your page the way you do. The way your site looks and performs is at the mercy of a number of variables such as browser version, platform, monitor size, and the preferences or special needs of each individual user. Your page may also be viewed on a mobile device like cell phone, or using an assistive device like a screen magnifier or a screen reader. Browser Versions + One of the biggest challenges in designing for the Web is dealing with the different browsers * Inthe past browsers were so incompatible that web authors were forced to create two separate sites, one for Internet Explorer and one for Netscape. + Things have improved dramatically now that browsers have better support for web standards established by the World Wide Web Consortium (W3C for short) After we see a general overview of the web design environment, now it's time to roll up our sleeves and start creating a real web page. It will be a simple page, but even the most complicated pages are based on the principles described here. AWeb Page, Step by Step Step 1: Start with content. We add raw text content and see what browsers do with it. Step 2: Give the document structure. We learn about HTML elements and its structure. foL_ Step 3: Identify text elements. You'll describe the content using the appropriate text elements and leam about the proper way to use HTML Step 4: Add an image. By adding an imageto the page, we will learn about attributes. Step 5: Change the look with a style sheet. We learn formatting content with CSS. Step1. Start with Content Rules Naming Conventions tis important that you follow these rules and conventions when naming your files: + Use proper suffixes for your files._HTML files must end with .html (some servers allow .htm). Web graphics must be labeled according to their file format: gif or jpg (jpeg is also acceptable) + Never use character spaces within filerames. It is common to use an underline character or dash to visually separate words within filenames, such as robbins_bio. htm! or robbins-bio.html + Avoid special characters such as?, %, #,/, 5+, ete. Limit filenames to letters, numbers, underscores, hyphens, and periods. Filenames may be case-sensitive, depending on your server configuration. Consistently using all lowercase letters in filenames, while not necessary, makes your filenames easier to manage +k Keep filenames short. Short names keep the character count and file size of your HTML file in check. If you really must give the file a long, multiword name, you can separate words with capital letters, such as ALongDocumentTitle html, or with underscores, such as a_long_document title html, to improve readability. Self-imposed conventions. Itis helpful to develop a consistent naming scheme for huge sites. For instance, always using lowercase with underscores between words. This takes some of the guesswork out of remembering what you named a file when you go to link to it later al| L_ What Browsers Ignore Some information in the source document will be ignored when it is viewed in a browse, including + Line breaks (carriage returns)_. Line breaks are ignored. Text and elements will wrap continuously until a new block element, such as a heading (h1) or paragraph (p), or the line break (br) element is encountered in the flow of the document text, «Tabs and multiple spaces_. When a browser encounters a tab or more than one consecutive blank character space, it displays a single space. So if the document contains: long, long ago the browser displays: long, long ago ye Unrecognized markup_. A browser simply ignores any tag it doesnt understand or that was incorrectly specified. Depending on the element and the browser, this can have varied results. The browser may display nothing at all, or it may display the contents of the tag as though it were normal text. Text in comments_. Browsers will not display text between the special tags used to denote a comment. See the HTML Comments sidebar. HTML Comments You can leave notes in the source document for yourself and others by marking them up as comments. Anything you put between comment tags ( ‘Step2. Give the Document Structure Introducing... the HTML element| L_ Opening tag Content losing tag (may be text and/or ether HIML elements) (starts witha) Content here Flerhent cont: BABBB1ack Goose Bistro 7HES| Elements are identified by tags in the text source. A tag consists of the element name (usually an abbreviation of a longer descriptive name) within angle brackets (<>). The browser knows that any text within brackets is hidden and not displayed in the browser window. The element name appears in the opening tag (also called a start tag) and again in the closing (or end) tag preceded by a slash (/). Be careful not to use the similar backslash cheracter in end tags. The tags added around content are referred to as the markup. Itis important to note that an element consists of both the content andits markup (the start and end tags). Not all elements have content, however. Some are empty by definition, such as the img element used to add an image to the page. Step 3: Identify Text Elements 4k Introducing...semantic markup The purpose of (X)HTML is to provide meaning and structure to the content 4 Itis not intended to provide instructions for how the content should look (its presentation). + Your job when marking up contents to choose the (K) HTML element that provides the most meaningful description of the content at hand. That is semantic markup Step 4. Add an Image well add an image to the page using the img element L_ Empty elements: are do not have text content because they are used to provide a simple directive. E.g. image element (img), line break (br), horizontal rule (hr) Attributes are instructions that clarify or modify an element. For the img element, the src (short for “source’) attribute is required, and provides the location of the image file via its URL. The syntax for attributes is as follows Step 5. Change the Look with a Style Sheet + Cascading Style Sheets (CSS) 2. Basics of HTML HTML, which stands for Hypertext Markup Language, is the predominant markup language used for creating web pages. A markup language is a set of markup tags, and HTML uses markup tags to describe web pages. HTML is written in the form of HTML elements consisting of HTML tags surrounded by angle brackets (e.g. ) within the web page content. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpage. HTML can also be used to include Cascading Style Sheets (CSS) to define the appearance and layout of text. While a web developer, someone like you, uses the HTML tags to create the web page, software is required to interpret your code and display the information that you are trying to display: the software could be any web browser software. The purpose of a web browser is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. s| L_ World Wide Web Consortium (W3C) is the organization that develops guidelines and specifications for many web technologies including HTML. The W3C website is found at www.w3.org. HTML document is created using a simple text editor like notepad or any other text editor. Notepad can edit HTML, and at the same time you are able to view what you edit, in a web browser. HTML, HEAD, TITILE and BODY Tags The entire web page document is contained within an tag. The tag is called the root element because it contains all the elements in the document. Every web page starts with tag and ends with . Let us first see how a plain html code looks like. stitle>Page title here Our body content here The total codeis divided into two parts and both the parts are kept inside tags. Our page should start with and should end with . The first part inside this html tagsis the head and it starts with and ends with . The second pert starts with and ends with tag. Inside the tag we keep all our content which we want to display to our web page users. Whatever we place in will be displayed by the browser to the web users. Inside the root element the document is divided in to two.Fig Basic HTML tags + The element, which contains information about the document such asa title or a link toa style sheet % ~~ The element, which contains the real content of the document that you see. Let’s see both pars in detail The web page should have only one head tag. The head tag starts with and ends with . The text or tags that are inside the head tag will not be displayed in the browser window. Inside this tag we keep all the meta keyword tags used for search engines. One of the important tags which is put inside is tag, Title tags are used to give title to the browser window and it displayed at the top left side of the window. Title tags are also important for our search engine point of view. We should keep most important keywords inside the title tag Example: stitle> First Example Here is the first example for Intemet Programming e = a «x 1 First Example x CO [O fley/cyjuses/.. | ye 2 OD & Here is the first example for Intemet Programming Fig Web page Title itis also possible to put JavaScript code and Cascading Style Sheets in head section. If we are adding any JavaScript code here then that will be loaded when the browser opens the page. The The Element This is where we will place our content for our visitors. What we place here will be displayed to our visitors. A element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables o[| 3. HTML tags and their attributes Attributes provide additional information about HTML tags. HTML tags can have attributes %& Attributes provide additional information about a tag * Attributes are always specified in the start tag 4 Attributes come in name/value pairs like: name="value" The syntax for attributes is as follows: Example: the background color of HTML document can be changed using “bgcolor” attribute of the tag attribute Setting HTML Language The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers. According to the W3C recommendation you should declare the primary language for each Web page with the lang attribute inside the tag, like this: ISO 639-1 defines abbreviations for languages. In HTML, they can be used in the lang attributes Table ISO code of some international and local languages Language ISO Code Chinese zhEnglish En French Fr German De Russian Ru Local Languages Afar Aa ‘Amharic Am Afan Oromo | Om Somali So Tigrinya Ti Attributes Background Color You can change background color of your web page by using tag attribute bgcolor Color can be specified using color name or RGB value. The following also sets background color to green: Background Image We can use a background picture for web page instead of background color. You must have an image to do this. Then you can use background attribute of tag as follows Text Color aL_ We can also set the text color of the web page just like background color. We use text attribute of to do this. Example: Page with yellow back color and red text color Output e@ - ao x Bri Example SO [O filey//C/users).. ¥ >a oOos %)/ DY Page with Back Color x Fig Background and text colors of body Other attributes %* — alink: Sets the color for active links or selected links. link: Sets a color for link text. x vlink: Sets a color for visited links - that is, for linked text that you have already clicked on. Example’ ctitle> Link Colors a second page
thitd page
Yahoo mail Here: Clickable part (link text): Yahoo mail and URL: http://mail. yahoo.com The target attribute Itis used to specify where to display the contents of a selected hyperlink. If set to: + _blankthen a new window will be opened to display the loaded page * _self then loads the new page in current window. By default its _self. aExample: a link that opens on a new window First Pages/a>
Thetitle attribute Thetitle attribute is used to type a short description of the link. If you place the cursor over the link, you will see the text in the title attribute. Example’ Send an email to home at gmail When the link is clicked, the default email program opens with a new blank message addressed to the specified email address. Remember that this function will only work if there is an email program installed on your computer. HTML Comments Comments are piece of code which is ignored by any web browser. It is good practice to comment your code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code. HTML Comment lines are indicated by the special beginning tag placed at the beginning and end of every line to be treated as a comment. You can comment multiple lines by the special beginning tag placed before the first line and end of the last line to be treated as a comment. raFor example: Given line is a valid comment in HTML Working with Colors In HTML colors can be used to enhance the way your web page looks like. It can be used to change the background of your webpage, the color of your text or the content of a table. While choosing the right type of coloris your responsibility, HTML provides you with many options to mingle with. HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue colar values (RGB). The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF). HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign For example: *& ~~ Red = #FFO000 Green = #00FFOO Blue = #0000FF Cyan (blue and green) = #0OFFFF Magenta (red and blue) = ##FOOFF + Yellow (red and green) = #FFFFOO Both and will change the background color in to red + OF 4. Text formatting with HTML and background changing There are options if one wants to create a text in HTML. Let's see some of the tags that can be used to create text information. HTML Headings In HTML, you can create different heading levels in your document to help you organize the document into sections, just as you might do when writing a book. A heading element briefly describes the topic of the section it introduces. Headings are defined with the

to

tags.

defines the largest heading and

the smallest heading u