HTML and Web Design PDF

Preview

Summary

In these lecture notes we cover what HTML is and how it is used in Web Design. We also learn the important role that web design plays on the internet and why it is important to keep a close eye on HTML code in web design. ...

Description

What is HTML? HyperText Markup Language or HTML is the standard markup language of the World Wide Web. It is used to create web pages. It defines the structure and layout of a web page. Hypertext refers to links that allow you to jump to other places in the web page, or to a completely different web page. Links are an important feature of HTML. HTML files are text files, which you can create on any text editor, like NotePad (PC) or TextEdit (Free download for Mac). HTML has tags that indicate the content and structure of a Web page. A Web browser reads the HTML file, interprets the tags, and displays the information.

HTML consists of tags and attributes. What is a tag? Tags are commands written between angle brackets (the less than and greater than symbols) that define how elements on a web page will be displayed in a web browser. Tags can tell a browser to bold text, to make text a certain font size and color, to display an image, or to jump to another web page when the text is clicked.

Attributes are additional information about the tag. Attributes clarify the tag's function. Your web browser reads and interprets HTML and then displays the visible and audible elements on the web page. The HTML tags are not displayed. The browser simply uses them to decipher the content of the page. Saving an HTML file HTML files must be saved with an .html extension. The .html extension tells the browser that the content is HTML. The browser can then open the file, read and interpret the HTML tags and display the content in a visual manner.

HTML allows for the embedding of Cascading Style Sheets (CSS) to define the look and layout of text and other material, and of scripts written in languages such as JavaScript which affect the behavior of HTML web pages. Sir Tim Berners Lee (picture at right) was the primary author of HTML in the early

1990s. HTML can be considered code, but it is not a programming language; it is a markup language, which is a separate beast. The latest standard of HTML is HTML5, which adds interactive functions, among other things.

To understand basic HTML,watch this video (3:00) http://www.youtube.com/watch?v=CKlh1lwe2rY (Video from HowCast) As noted in the video, to create an HTML page you will need a text editor such as Notepad in Windows or TextEdit on a Mac. Pages you create in these editors must be saved with the html extension, rather than as plain text; for example, save your page as "mywebpage.html"



Cascading Style Sheets (CSS) Another coding language used on the Web is CSS, Cascading Style Sheets, which is similar to HTML, but its purpose is to tell the browser to display the page using particular layouts, designs, colors, types of fonts, spacing of elements and so on. CSS controls elements of design in a web site or web pages. You can add CSS to a separate page in the web site, or in the head of an HTML document (but that is least efficient). Normally, you have a global stylesheet in the web site that controls the look of the entire site including the typography, colors, layout and so on. The value of having a separate CSS document is that it allows you to make changes to the every web page on the site to reflect the colors, fonts, font sizes, background colors and more that you would like to use.

Benefits of Using CSS 1. Separate content from presentation. An external style sheet can contain all the styles for your web site. When you want to change the look of the site you only have to edit one style sheet. This is great for a web site that contains hundreds or thousands of pages. Imagine if you had to edit each page;it would take you forever. 2. Fast loading pages. Designing CSS-based web pages will speed up the loading of your pages considerably because the styles are all contained in one style sheet. 3. Small file size. CSS will reduce the file size of your HTML document. If you look at a

web page that is designed with CSS you will notice that the overall size of the code is smaller, compared to one designed with HTML attributes. This also helps reduce load times, when a web page is loading into your browser. 4. Reduce clutter.CSS allows you to get rid of a lot of extraneous HTML code, therefore making your site code neater and cleaner. This makes it easy to alter the code if you need to make edits. 5. Flexibility of design. CSS allows you to precisely adjust the placement, margins and padding of the content on the HTML page.

Web design How many web pages are there on the Internet? No one really knows, but there have been estimates of up to a trillion plus pages. That means there are a lot of people creating web pages using HTML! As you have probably noticed, some web pages look a lot better than others. Some web pages are easier to use because the elements on the page are laid out in a more intuitive fashion, making it easy to navigate around the site and to find what you are looking for. All that relates to what we call web design. What is Web Design?

Basically web design is about designing HTML pages that will be displayed on the World Wide Web. Web design includes a number of important tasks such as understanding and designing

a web page's layout, deciding what colors to use for the background, for fonts, where to place images, how big the images should be, where and whether to add video, how to structure menus and that's only a little part of a what a web designer needs to think about. Web designers must think about a number of important things before they even begin thinking about design--things like who visits the site (audience), what to people do when they get to the site (function), how do people find the site. Answers to these questions and much more goes into the design of a web site. Here's what Wikipedia has to say about web design. Here are some web sites that are considered well-designed--take a look and see what you think.



What elements should you look for to evaluate the quality of a Web site’s design?



In general, everything on the site should be aimed at promoting the message, brand, mission. Anything that is a distraction or there for cuteness should be removed! 1. Clean and simple interface Get your message across without excessive design elements. Lots of “white space” makes the elements you add really stand out. Be consistent with your design across pages, and use colors that complement each other. 2. Navigation that is clear, direct and easy to understand Navigation should be easy to understand and easy to “navigate”; the fewer the clicks, the better. All the links should work, should be clearly labeled and consistently placed on the pages. 3. Engaging, fresh, reliable content Engage the user with humor, story-telling, and interactivity. Use different kinds of media to keep users interested. Content should not contain misspellings or incorrect grammar. The content should be consistently accurate. 4. Responsive design Design that is equally effective on different-sized screens, so that it works on a computer, tablet, mobile phone or other device. Content is downloaded quickly. 5. Makes it easy for the user to find the information they seek Content is organized effectively. Includes a search box. Provides

clear navigation options. 6. Technical reliability The site is always “up” and doesn’t crash or throw errors. The site can be accessed using a variety of browsers and devices.



Web Browsers What is a web browser and what does it do?

A web browser is a software application used on the World Wide Web to retrieve web pages from a server, read the HTML that the web page is written in, and display the web page to the user. The user requests a web page by entering the URL, Uniform Resource Locator, into the browser. The image here shows the HTML code that the browser "reads". The browser uses the URL to fetch the web page from a server, reads the HTML for the page and then interprets the HTML into a web page which it displays for the user. The browser displays what is on the page including text, hyperlinks, images, video or other multimedia, sometimes with the use of additional software called plugins, such as Flash, Java or QuickTime. You are using a web browser right now to view this web page. Web browsers are also used to search for information and other resources available on the web. You use a browser to log-in to sites, to click on and follow links from one site to another, and to print, send and receive email, among other activities. The most commonly used web browsers now are Chrome, Internet Explorer, Firefox and Safari.

Read the short history of web browsers Explore the Timeline of Web Browsers...