Web Programming Fundamentals PDF

# WEB PROGRAMMING FUNDAMENTALS ## WEB PROGRAMMING CONCEPTS ### Lecture's Notes - Web programming concepts - HTML Language Basics ## WEB PROGRAMMING - On the Web, the first matter of business is designing how the site works. Before picking colors and fonts, it is important to identify the site's g...

# WEB PROGRAMMING FUNDAMENTALS ## WEB PROGRAMMING CONCEPTS ### Lecture's Notes - Web programming concepts - HTML Language Basics ## WEB PROGRAMMING - On the Web, the first matter of business is designing how the site works. Before picking colors and fonts, it is important to identify the site's goals, how it will be used, and how visitors move through it. - These tasks fall under the disciplines of: - Interaction Design (IxD) - User Interface (UI) design - User Experience (UX) design. - The goal of the Interaction Designer is to make the site as easy, efficient, and delightful to use as possible. - **User Interface design**, which tends to be more narrowly focused on the functional organization of the page as well as the specific tools (buttons, links, menus, and so on) that users use to navigate content or accomplish tasks. - **User Experience Designer**. The UX designer takes a more holistic view ensuring the entire experience with the site is favorable. UX design is based on a solid understanding of users and their needs based on observations and interviews. ### Some of the documents an IxD, UI, or UX designer might produce include: - **User research and testing reports** - Understanding the needs, desires, and limitations of users is central to the success of the design of the site or web application. Site designs often start with user research, including interviews and observations, in order to gain a better understanding of how the site can solve problems or how it will be used. It is typical for designers to do a round of user testing at each phase of the design process to ensure the usability of their designs. - **Wireframe diagrams** - A wireframe diagram shows the structure of a web page using only outlines for each content type and widget. The purpose of a wireframe diagram is to indicate how the screen real estate is divided and indicate where functionality and content such as navigation, search boxes, form elements, and so on, are placed, without any decoration or graphic design. - **Site diagram** - A site diagram indicates the structure of the site as a whole and how individual pages relate to one another. Figure 2 shows a very simple site diagram. Some site diagrams fill entire walls! - **Storyboards and user flow charts** - A storyboard traces the path through a site or application from the point of view of a typical user. It usually includes a script and "scenes” consisting of screen views or the user interacting with the screen. The storyboard aims to demonstrate the steps it takes to accomplish tasks, possible options, and also introduces some standard page types. ## BASICS OF HTML - **Hypertext Markup Language (HTML)** - **Web Browser Language:** All Web Browser understand HTML - **HTML 5** is the latest - **Maintained by W3C - World Wide Web Consortium** - HTML (Hypertext Markup Language) is **the language used to create web page documents**. There are a few versions of HTML in use today: the newer, more robust HTML5 is gaining steam and browser support. It has a stricter implementation called XHTML (extensible HTML), which is essentially the same language with much stricter syntax rules. - **HTML is not a programming language**: it is a markup language, which means it is a system for identifying and describing the various components of a document such as headings, paragraphs, and lists. The markup indicates the document's underlying structure (you can think of it as a detailed, machine-readable outline). You don't need programming skills—only patience and common sense—to write HTML. - The best way to learn HTML is to write out some pages by hand. If you end up working in web production, you'll live and breathe HTML. ### HTML Naming Conventions It is important that you follow these rules and conventions when naming your files: - **Use proper suffixes for your files.** HTML and XHTML files must end with .html. Web graphics must be labeled according to their file format: .gif, .png, or .jpg (.jpeg is also acceptable). - **Never use character spaces within filenames.** It is common to use an underline character or hyphen to visually separate words within filenames, such as robbins_bio.html or robbins-bio.html. - **Avoid special characters such as ?, %, #, /,:, ;, •, etc.** 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, although not necessary, is one way to make your filenames easier to manage. - **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 hyphens, such as a-long-document-title.html, to improve readability. ### Web Browsers Ignore - **Multiple (white) spaces.** When a browser encounters 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 - **Line breaks.** Browsers convert carriage returns to white spaces, so following the earlier "ignore multiple white spaces rule," line breaks have no effect on formatting the page. Text and elements 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. - **Unrecognized markup.** Browsers are instructed to ignore any tag they don't understand or that was specified incorrectly. 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 it is. - **Text in comments.** Browsers will not display text between the special <!-- and --> tags used to denote a comment will not display text between the special tags used to denote a comment ## HTML WEB PAGE - An HTML element is defined by a **start tag**, some content, and an **end tag.** - `<tagname>Content goes here...</tagname>` - The HTML element is everything from the start tag to the end tag: - `<h1>My First Heading</h1>` - `<p>My first paragraph.</p>` - HTML is **Not Case Sensitive** - The **DOCTYPE** declaration defines the document type that identifies this document as an HTML5 document - The entire document is contained within an `<html>` element. The html element is called the **root element** because it contains all the elements in the document. - Within the html element, the document is divided into a **head** and a **body**. The head element contains descriptive information about the document itself, such as its title, the style sheet(s) it uses, scripts, and other types of "meta" information, while the body element contains everything that we want to show up in the browser window. - The `<meta>` tag defines **metadata** about an HTML document. **Metadata** is data (information) about data. - `<meta>` tags always **go inside the `<head>` element**, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. - Metadata will **not be displayed on the page**, but is machine interpreter. -Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. - **Define keywords for search engines:** - `<meta name="keywords" content="HTML, CSS, JavaScript">` - **Define a description of your web page:** - ` <meta name="description" content="Free Web tutorials for HTML and CSS">` - **Define the author of a page:** - `<meta name="author" content="John Doe">` - **Refresh document every 30 seconds:** - `<meta http-equiv="refresh" content="30">` - **Setting the viewport to make your website look good on all devices:** - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`