Reading notes for Code Fellows!
Most people access websites using software called web browsers.
Some people who are visually impaired use programs called screen readers to access websites. These programs read out the contents of a computer screen to the user.
People access websites on an increasing number of devices including, but not limited to:
Web servers are specialized computers that host websites. They are optimized to send out web pages and are constantly connected to the internet. They are most commonly maintained by web hosting companies.
All websites use HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). Many websites also incorporate JavaScript to give them functionality or make them dynamic. Content management systems, blogging software and e-commerce platforms routinely make use of additional elements/technologies in their websites.
All websites have a unique IP address associated with them and the server they are located on. Domain Name System (DNS) servers are repositories for all of these addresses and they function similarly to phone book listings to direct browsers to the correct location of the website..
HTML is the language which describes and gives web pages structure. It is made up of characters called HTML elements inside of angled brackets called tags. These usually come in pairs: an opening and a closing tag. Each element tells the browser something about the structure of the information contained within. Tags act like containers for the text or other information located inside of them.
<h1>This would be a heading</h1>
would indicate to the browser to display:
on the web page.
<h1> is the opening tag
</h1> is the closing tag
Most elements can have one or more attributes such as class or id which provide additional information about their contents. Attributes consist of two parts: a name and a value separated by an = sign. for instance:
<p lang="en-us">Paragraph in English</p>
<!DOCTYPE html>
<html>
<head>
<title>The Title of the Page</title>
</head>
<body>
<h1>A Heading in the Body of the Page</h1>
<p>Anything in the body is displayed in the main browser window</p>
</body>
</html>
<body> Everything inside this element is shown in the main browser window.<head> Located before the <body> element, this element contains information about the page.<title> The content of this element is displayed at the top of the browser or on the ‘tab’ above the address bar. The <title> element is usually located within the <head> element of the page.
<!DOCTYPE html> Each webpage should begin with a declaration such as this, which tells the browser the version of HTML the page is using.<-- Comment Here -->
<div> and <span> elements allow us to group block-level and inline elements together, respectively<iframes> allow other web pages to be shown through windows “cut out”” of the web page<meta> tag is an open tag located in the <head> tag and contains information about the web page. It is not visible to users but can convey information about the page to search engines, who created the page, or if the page is time-sensitive| Character | CODE | Description |
|---|---|---|
| < | < |
Less-than sign |
| > | > |
Greater-than sign |
| & | & |
Ampersand |
| " | " |
Quotation Mark |
| © | © |
Copyright symbol |
| ® | ® |
Registered trademark |
| ™ | ™ |
Trademark |
| ÷ | ÷ |
Division sign |
HTML5 introduced a new set of elements that help define the stucture of a web page. Where traditional layouts typically consisted of multiple <div> elements, the use of these new semantic tags or elements provides clearer code. They also work better with screen readers utilized by users with visual impairments. <div> is still used, but not nearly as much now.
The new HTML5 elemanets indicate the purpose of different parts of a web page and help to describe its structure. Examples are:
<header> Header. Appears at the top of pages and sometimes even the top of an <article> or <section> within the page.<footer> Footer. Appears at the bottom of pages and sometimes even the bottom of an <article> or <section> within the page.<nav> Navigation. Typically used for primary site navigation.<article> Article. A container for any section of the page that could feasibly stand alone. There may be several on any given page.<aside> Aside. A container for content related to the entire page. Alternatively, if it is located within an article container, it contains content related to that article.<section> Section. Groups related content together and commonly has its own heading.When creating a new web page, it is important to understand who our target audience is. Why will they come to our site? What information are the looking for? How often are they likely to return?
Popular design tools used in the planning websites are site mapping and wireframing.
Design is about communication. Visual hierarchy helps users understand what we are trying to tell them. We can differentiate between separate information using size, color and styling. Grouping and similarity can help simplify the information we present.
JavaScript can make our web pages more interactive. It does this in four ways:
Using JavaScript we can implement things such as slideshows, forms, filtering data or reload parts of the web page.
.js extension.<script> tag in an HTML page tells the browser to load the JavaScript file. (this is similar to the relationship between the <link> tag and a CSS file.)