All that is needed to code for the web is a text editor. Everything we do is coded by hand. For learning how to code, it is best to write the code itself with a simple Text Editor so that the repetition helps you to remember. Once you know what you are doing, you can use amore advanced editors. No authoring programs like Adobe Dreamweaver or Muse.
It’s our preference to use a text editor, like HomeSite, TextPad or TextMate, to “hand code” everything, rather than to use a wysiwyg what you see is what you get HTML and CSS authoring program, like Dreamweaver. We just find it yields better and faster results.
The text editor, the browser and FTP program are all you need to build web sites. Do not use Microsoft Word or another word processor. There are many text editors. I prefer a simple HTML/CSS dedicated editor with live preview. Brackets is the most straightforward, simplest, and easiest editor with a built in preview. You can also use the Phoenix in browser editor (currently only works with the Chromium based browsers). Atom and BBEdit are other HTML centric editors.
Other editors are for general programming, and target all kinds of programming languages. They are good but can be more confusing to use, like Microsoft’s Visual Studio and SublimeText.
The Browser
Any of the standards compliant browsers can be used. Chrome is most popular, Firefox is the best, and Safari plays nicest with the OSX operating system. Every other browser runs on the Chrome engine. In Safari, go into the Preferences -> Advanced tab and select Show Develop Menu in the menu bar to get the development goodies to show. All browsers allow you to inspect the code with the browser development tools. Right click, select Inspect, to zoom into the code that describes the document at the point where you click. If you have never done that before, please explore the code behind the websites you browse.
HTTP
Hypertext Transfer Protocol (HTTP) is a protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but can be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response.
SFTP using Fetch or FileZilla
Uploading your files to the server requires a Secure File Transport Protocol (SFTP). The application that does that for Mac users is Fetch. With it you can upload and download files onto your web space at school. Fetch was created at a university and is free to all students. You can get your free license here. Fill out the form, use the Parsons mailing address 66 5th Avenue, New York 10011, and they will send you a serial number to use with Fetch.
FileZilla is a cross platform SFTP program for students using windows. Instructions for connecting and transferring files using Fetch and FileZilla are available near the bottom of the page.
Other SFTP programs available on both the Mac and Windows operating systems are CyberDuck, WinSCP, Fugu, and Transmit.
Publishing Your Work using Fetch
Everyone will publish their work on the web. We start by making sure that everyone can. The software most of you will use is Fetch. Don’t forget to register the product. It is free to all students.
The server space is a lot like your desktop, only instead of folders, like on OSX, they are called directories. These servers are usually run by computers running Unix or Linux. These operating systems do not tolerate spaces. Lower case letters and capitalized letters (a and A) are not the same. Follow those rules to minimize problems uploading files to the web.
You can drag and drop between the Finder window and Fetch. When you drag the same document into Fetch, the existing document will be overwritten without warning. This is default behavior. Always keep your latest version on your hard disk, where it can be backed up, rather than online, where you can accidentally over-write it.
The domain is the name that you type in to get to the website. All websites are known by their number, but to make it easier for humans, they allow us to connect a domain name to that number. You can get you own, or by default, you will use the Parsons.edu domain.
Everyone has server space at Parsons. The domain is hosted on the Parsons B Server. It looks like http://b.parsons.edu/~dejongo/. I have already created a page that has a link to the parsons folder I want you to set up. You can mask a domain name to that space. Alternatively, you purchase your own server space, you will need to register a domain name. Cost is approximately $15 a year for the domain name and renting server space ranges from $12 to $120 a year. Many hosting services include the cost of the domain name with the hosting plan.
Setting Up Your Server Space at Parsons
Art, Media, and Technology B.PARSONS.EDU user accounts are set up when I send a list of student names to the IT Department. They use the standard New School identification: last name with first initial and numbers that you are familiar with, prefaced by http://b.parsons.edu as your user account.
You will be sent an email once the IT department has created your account. The email is from: root and the subject is something like: Important AMT B.PARSONS.EDU [user ID]. SAVE THIS E-MAIL!
This email may have entered your spam folder, which can make it difficult to find. Please find the email and follow the instructions to set up your server space.
The email will contain your B Server address, user, and password. You need to have your b.parsons.edu address and your B Server password to access your server space.
If you have questions, or if it does not work, you should check to make sure address, name and password are typed in correctly. If it still does not work, enter a service request. Click on the link to Submit an IT Service Request at the top right of the page. Please have tickets assigned to Enterprise Systems group. Include your Last Name, First Name, Net ID, email and a request to ask about your server space on the b.parsons.edu server. You can also email the IT department to create a ticket.
Getting your Own Host and Domain Name
A lot of hosts give you a free domain if you subscribe. I personally use DreamHost, as they host non profit sites I work on for free. Their price is more expensive.
One host I’ve run across is Ebound hosting, which has a great intro plan that costs only $1 a month. They also have an unlimited plan that gives you everything for under $5 a month including domain name for the year, multiple domains and all the usual goodies in spades. Their help response was quick and resolved all problems the one time I had to use them. Give them a try.
Their cost, with a three year plan, is $4 a month, and that includes a lot of goodies, including a domain free for the first year. Search the web for a discount. There is a 25% discount using this code: EBH25 at the time I write this. I have no connection with Ebound hosting but in calling them to solve a problem, a real human answered on the second ring. That’s amazing these days.
Finally, to get you started, you can host for free at biz.nf but their plans are more expensive over the long run than what you get with Ebound hosting. I’ve kept a number of domains for over 20 years, so the costs add up.
You cannot point a domain to your New School or Parsons server space but you will be able to mask your domain to these accounts. That means a frame is created with your domain name above the address bar but it actually shows the school website, which appears in that frame.
Connecting and Uploading Files to your Server Space
To access your files using Fetch, fill out the Hostname with “b.parsons.edu” then fill out Username with your Newschool ID, set your connection to SFTP. Fill in your password. It can be found on the email from root. Set the port to “222” and your initial folder to “public_html”. You should be able to log on.
On Windows using FileZilla or on Macs that have trouble connecting to the server using Fetch from school or home, enter sftp://b.parsons.edu for Host, your username with your New School ID, the password as found on the email from root, and port: 222. That should work. In the left hand pane locate directories on your hard disk which contain the files to be transferred, and transfer them to the right pane representing your server space.
You will be asked to confirm overwriting the file, which is the standard option. Check “Always us this action” and “Only apply to uploads”.
The server is laid out much like your hard disk. You will drag files from the finder into Fetch, as if it were a local window. The main difference is that Fetch will not warn you when you are overwriting your files. This is a good thing, as you will be dragging your files from your desktop to the server and overwritten the old files with new files the whole semester long.
The second difference is that upper and lower case letters are completely different, and have nothing to do with one another. On your hard disk, it makes no difference. On the server, your links will not work. My suggestion is to name all files using lower case. Do not use spaces in file names!
On the parsons B Server, you need to place all your files in the public_html folder. Different hosts can designate different names for this folder.
Setting up your Server Space
I expect you to use your root — public — directory for your own purposes. The class works out of a folder called “parsons” with a lower case p. Case matters! Create a new folder and call it parsons lowercase p in the root directory. That is where you will develop all of your work for this class. As there is a midterm with associated assignments and a final, create two folders a portfolio and a final folder.
Web Site Organization
Index.html and Worksheet.
You will create an index.html page inside of the parsons folder done in-class during the second week that will contain the links to each of your assignments, a photograph of yourself, along with your name and your major and minor, if you have one, so I can associate your work with you as a person.
Your first assignment example counts as research for your portfolio. It could go in the portfolio folder or stand alone. A work-file inside of the portfolio example and final assignment folders example will serve as your worksheet. This is where you document your creative development in at least seven steps. Update these work-files with all of the work you do to get to your final. This includes old ideas even when you change your mind and start working anew. That way I can assign credit where credit is due.
The landing page for each student needs to work exactly the same. This is how I make contact with your work. I will be going to this page to check up on your progress, so keep it current. Your grade depends upon it. Homework needs to be up the day before class — so I have some time to check it before teaching, for issues that can then be addressed in class.
Select all the text and paste into blank text editor document. Template 1 contains most used HTML5 elements. Template 2 does not. Text is at 25% so it can be easily copied. Make sure you copy all of the text.
Template 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- Sets viewport to the device screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Link an external style sheet-->
<link href="css/styles.css" rel="stylesheet">
<style>
main { max-width: 1500px; }
section { max-width: 1000px; margin: 10px auto; padding: 0 20px; }
img {width: 100%}
figure {width: 25%; margin: auto;}
/* Overrides desktop style when viewport is less than 600px (for smart phones) */
@media only screen and (max-width: 600px) {
}
</style>
</head>
<!-- body -->
<body>
<main>
<section>
<header>
<h1>Heading 1</h1>
<nav>
<ul>
<li>
<a href="#">
navigation as unordered list item
</a>
</ul>
</nav>
</header>
<article>
<h2>Heading 2</h2>
<p>The <strong>template</strong> contains <em>most used</em> HTML5 elements. Replace this text with the content written for the first assignment. Notice that there is no closing tag for this paragraph or for the list item in the navigation above.
<figure>
<img src="http://b.parsons.edu/~dejongo/12-fall/stuff/01-blocks.gif" alt="blocks" >
<figcaption>Blocks. The figure tag make adding a caption below the picture possible. The picture tag makes multiple pictures possible, and places the img, an inline element, in a block element. </figcaption>
</figure>
</article>
<footer>
<hr>
<p>Resources
<ul>
<li> HTML <a href="http://b.parsons.edu/~dejongo/01-writing-html5/#inline_elements" >inline</a> and <a href="http://b.parsons.edu/~dejongo/01-writing-html5/#block_elements" >block</a> elements.
<li> Writing <a href="http://b.parsons.edu/~dejongo/03-the-mechanics-of-css/" >CSS</a>, <a href="http://b.parsons.edu/~dejongo/03-applying-css/" >examples</a>, <a href="http://b.parsons.edu/~dejongo/04-the-layout-modes/" >layout</a> and <a href="http://b.parsons.edu/~dejongo/05-styling-the-navigation/" > styling the navigation</a>
<li><a href="https://validator.w3.org" >Validate your page</a>
<li><a href="https://web.dev/measure/" >Page quality audit</a>
</ul>
</footer>
</section>
</main>
</body>
</html>
Template 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- Sets viewport to the device screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Link an external style sheet-->
<link href="css/styles.css" rel="stylesheet">
<style>
/* Overrides desktop style when viewport is less than 600px (for smart phones) */
@media only screen and (max-width: 600px) {
}
</style>
</head>
HTML stands for Hyper Text Markup Language. If you wish to see the entire specification in a one page version (large document), visit the living standard
Content is “marked up” using tags to designate the structural significance of that content. Each piece of content so marked up constitute an HTML element, of which there are many.
A first level header is designated by opening and closing tags: <h1> 01 Writing HTML5 </h1>. All parts of the document are marked up with such tags to create HTML elements, even parts that you cannot see but still describe the document, such as the meta tags found in the header, or the <style> and <script> tags that contain CSS and Javascript.
To create an HTML page, open a text processor. Creating a new file and call it index.html when saving. The file needs to be called index.html with a lower “i”. It is the index of the directory in which it is located. It will be the file that is opened upon entering that directory.
Every directory should have an index.html file, as some web servers allow visitors to see the content of the directory when there is no index.html file present. Other files in the directory can be reached by placing links connecting that page on the index.html page.
The following elements make up the HTML page:
The Structure of an HTML Document
The Doctype
The doctype has been greatly simplified in HTML5. The DOCTYPE tells the browser the version of the HTML rules the document will follow. Using the following DOCTYPE tells the browser you will be using HTML5. This is the only DOCTYPE I expect to see.
<!DOCTYPE html>
The HTML Element
The HTML elements contains all other elements. It is the root element, and the language attribute is specified as English.
<html lang="en">
The Head Element
The head element contains information about the content but not the content itself. This is known as the document;s metadata. The head element does not get displayed in the browser window.
The Character encoding declaration specifies the encoding used to store or transmit the document. The Meta tag charset=”utf-8” tells the browser to use the unicode universal character set transformation format—8-bit.
The title shows up as the title of the browser window.
The header element closes before the body element opens.
The Body Element
Markup written in the body element shows up in the viewport, or browser window. Think of this element as encompassing everything that appears in the browser window.
Everything you write comes between the opening and closing body tag. In the following, only “Hello World!” will show. Comments are not rendered by the browser.
<body>
<!-- Comment your Work! -->
<p>Hello World!</p>
</body>
The body element closes before the html element closes.
The Closing HTML element
Closing the HTML element is the last tag on the page. It closes the tag that holds all of the other elements in the document.
</html>
Element or a Tags?
An element is a single “chunk” of code comprising of a start and ending tag. They are representations of a thing for the browser, an object. Elements have all kinds of properties for the browser, like firstChild, etc.
<div>This is a div element</div>
Tags is the opening and closing code of the elements. <div> is a tag. <div>content</div> is an element.
“Elements are not tags. Some people refer to elements as tags (e.g., “the P tag”). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.” From W3 HTML specification
The Inherent Structure of HTML
HTML is concerned with the structure of the content, and not with how the content should be displayed.
The natural flow of content is inline, meaning that content flows horizontally, like the letters on a line of text. In English, that is from left to right but it could be in any direction.
In addition to the horizontal inline flow of content, elements can be determined to be block like and flow vertically. Block elements do not flow like characters but like paragraphs, as entire blocks of text. By default, their width expands to fill the parent element and the flow is vertical. They flow down the page, starting from the upper left hand corner.
In HTML, block elements cannot descend from (be a child of) inline elements. Inline elements are the content of a block element.
CSS can change the display property of an element. It can make inline elements display as block elements, and block elements display as inline elements. That is very useful, usually to make inline elements act like block elements.
Valid HTML requires that block level elements do not descend from inline elements. Changing the elements displays with CSS does not change the validity requirements of the HTML document.
Tag Attributes and Values
Tag Attributes
HTML tags can take attributes, which describe certain aspects of the elements, with different elements having various assigned attributes. There needs to be a space between each attribute. Attributes for the img tag, for example, are src, width, height, class, and alt.
Example: <img src="file_name" alt="logo">
Example: <a href="file_name">File Name</a>
Values
Every attribute has a value, even if it is an empty value. For example, the value of the src (source of the image) is the location and name of the image. While it is no longer a requirement to put either double or single quotes, as long as there are no spaces or other non-alphanumeric characters, it still best practice to do so.
Example: <img src="file_name" alt="logo">
Example: <a href="file_name">File Name</a>
Role Attributes
The role attribute describes the role(s) the current element plays in the context of the document. In the official language of the W3 “The XHTML Role Attribute allows the author to annotate XML Languages with machine-extractable semantic information about the purpose of an element. Use cases include accessibility, device adaptation, server-side processing, and complex data description.” Example: <nav roll="navigation">
Understanding the Tag Hierarchy
DOCKTYPE
html
head
meta
title
style
body
main
header
nav
ul
li
li
li
li
section
article
h2
p
p
img
figure
img
figcaption
p
footer
HTML is a collection of elements arranged in a kind of containment hierarchy. This is a parent – child relationship, where the enclosing tag is the parent of the enclosed tag, which is its child. The entire structure can be likened to a tree, with the <html> tag as the single trunk from which the rest of the branches arise, first splitting into the two main branches, the <head> and the <body>. inside the body tag are all of the other branches that make up the document.
After the <doctype>, the HTML document starts with the <html> element that contains all other elements. It contains only two tags, the <head> and the <body> tags.
The <head> tag contains information about the page (meta-information) but that is not visible, like the <title> tag, <meta>tags and <html>, <style> and <script> tags and links <link>to styles and scripts.
The <body> tag contains all of the content, everything that’s visible in the browser window. The tags are usually several levels deep. Nesting tags is very useful, for it groups elements together. This makes it easy to create the different parts of the layout.
In the figure on the right, the <wrapper> contains all of the other visible content. This element is usually given automatic margins that center it horizontally in its parent tag, the <body>. If the <wrapper> is moved to the right, all the child elements contained within it are moved to the right as well.
Because each element is a child of another element, there are only clearly determined paths. For example, the <img> is a child of <p>, which is a child of <article>, which is a child of <section>, which is a child of <wrapper>. The complete path of the <img> tag is html body wrapper section article p img. This path would select all images in the paragraphs contained in article, section, wrapper, body, html. Since there are no other images, only the image with the red background is targeted by this path. The <img> in the figure has a different path, for example.
How to Write the Code
A tab is used to show how many levels the code is nested from the <html> element. This results in a visual way to check if the code is nesting properly. The code should look like :
To make it easy on you, there are tools that let you clean up your hierarchies automatically. You’ll want to remember this link right before you hand in your midterm and at the end of the semester, when you hand in your final.
The HTML file with all of its codes and content gets parsed by the browser. The syntax of each tag will be analyzed to see how it fits together according to the HTML rules. This results in a document object model where each node represents a branch on the tree.
General Rules To Follow
HTML5 has loosened up the rules somewhat but it is still desirable to follow these rules for well formed HTML documents.
Close Every Tag
Most Tags contain content, meaning that there is an open tag and a closing tag to signify where the content starts and where it ends. Some tags do not need to close, like <img>because there is no content. These tags are pointer to content, and get replaced by that content. Other tags are self closing, like the <meta /> and <br /> tags. List of self-closing tags: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, and wbr.
Accidentally not closing a tag can cause all kinds of havoc and will be flagged when validating. It is a common occurrence in the first few weeks of writing code.
Correctly Nest Every Tag
If a tag opens before a preceding one closes, it must be closed before that preceding one closes. <header><h1>Title</h1></header> not <header><h1>Title</header></h1> CSS relies on proper nesting to target styles to elements, so you have to get this right. In this example, the </h1> tag is nested in the </header> tag, and is the child of the header, which is the parent tag. As a container, a tag acts like a group, and moving a parent also moves all of the enclosed children. Likewise, absolute positioning is based on the coordinates of the parent element.
If you visualize each element as a node on a tree, it is obvious that you cannot open a tag before the previous tag is closed. If you make a mistake, the browsers can sometimes repair the damage, and everything still displays correctly but don’t count on it, and different browsers have different levels of damage control.
Inline Tags Cannot Contain Block Level Tags.
Block-level elements follow one another according to the document flow, one below the other. Inline elements follow one another as characters in a paragraph. While it would seem obvious to not mix these two up, the validator will catch you if you do.
Keep Tags Lower Case
This is a requirement of XHTML5, which we will not concern ourselves with but its a good idea anyway.
Tags Used to “Mark Up” the Content
Learning HTML comes through writing HTML. The more you code, the easier it becomes till it’s second nature. The content is divided into inline and block tags.
Block elements display like paragraphs, coming one after the other vertically down the page in the document flow.
Inline elements display just like characters, coming one after the other horizontally till the end of the line. The line then breaks and resumes at the beginning the next line down, and so on.
CSS allows you to override the object’s default display and make inline elements display like block elements or vice versa. You’ll learn about that later.
There are many HTML elements. Mozilla organizes them according to function. That’s helpful. Don’t memorize them. You will remember the ones you use most often and you can always look up the other ones up. Here are all the elements you’ll most likely use:
Inline Elements
These elements display just like characters, coming one after the other horizontally, till it comes to the end of the line.
span
The span tag selects inline content.
So much information.
So much <span style="color: red;">information</span>.
strong
increases importance
So much information.
So much <strong>information</strong>
emphasis
for emphasis
So much information.
So much <em>information</em>
line break
Breaks the line without creating a new paragraph.
So much
information.
So much <br />information.
Inline Quotations
Quotations inside of a paragraph can get automatic quotes when you use this tag and the following CSS pseudo elements. (q:before {content: ““”; } q:after {content: “””; }).
So much information.
So much <q>information</q>.
Anchor Tag (Links)
The anchor element anchors a URL (uniform resource locator, or a unique web address) that targets the destination id or web page by using the href (hypertext reference) attribute.
Any tag can be a target, within any document on the world wide web. To target a tag, it has to contain an id <h3 id="anchor">.
To target the id, you need to use the id identifier, the hash tag # and the id name itself. <a href="#anchor">.
Hyperlink to destination on the same page
Click the example below and you’ll see the page jump just a little.
A hyperlink can address any unique webpage on the world wide web. It can use an absolute address, or a relative address, if the page is on the same server.
Absolute Hyperlink Address
An absolute address starts with http://, as in the address of the page that you are on (look up at the address bar)<a href="http://b.parsons.edu/~dejongo/01-writing-html5/">Writing HTML5</a>.
If the page is on the same server, it is possible to omit the absolute reference, and specify the path to the document from the location of the document containing the link.
The image tag gets replaced by the image. The img tag does not have a closing tag.
If the image is not at the location specified by the src attribute you will see a generic missing image icon.
There has to be an alt attribute so that text will appear if the image does not show up. The img tag will be flagged by the validator if it does not have an alt tag. The information is used by screen readers to explain what the image is about to blind people who listen to web pages. It is also a good idea for illustrators, designers, photographers and other people relying on images to load up the description of each image so search engines can include that in people’s searches.
The title attribute is optional. The title shows up when you hover over the image for a second or more.
<img src="image_location/name_of_image" alt=“required description of
image for screen readers or when images are turned off" title="Final Thumbnail" >
Comments
Comments are a way to add notes or hide code. Comments are not displayed by the browser. Use them to notate your document with a description of what’s going on in each part of the document.
Comments will help remind you why you did something a certain way (or help someone else figure out how to read your code).
You can also use comments to temporarily hide code that you do not want to use but do not yet want to delete.
Do not use two dashes in a row — within the comment, as that causes confusion in some browsers.
<!--
Comment your Work!
-->
Block-level Elements
Block elements display like paragraphs, coming one after the other vertically down the page in the document flow.
div
div stands for division. It is the generic block element, used when an element is needed for styling purposes, or as a convenience for scripting. The <div> element represents nothing, has no semantic meaning. Do not use in place of elements that have semantic meaning. It is not equivalent to the HTML5 section element.
content
<div style="background: pink; padding: 10px;">content</div>
Headlines
How a headline looks depends on how they are styled. You should use headlines to structure your content, not based on how they look.
<p>paragraph bla bla bla bla.</p>
<p>paragraph bla bla bla bla.</p>
Block Quote
Used to style quote that takes up an entire paragraph. It is indented and given a different style.
paragraph bla bla bla bla.
So much information.
<p>paragraph bla bla bla bla.</p>
<blockquote>So much information.</blockquote>
Thematic Break (Horizontal Rule)
Although previous versions of HTML defined the hr element only in presentational terms, as in horizontal rule, the element has now been given the specific semantic purpose of representing a “paragraph-level thematic break” which is to be styled using CSS. For legacy reasons, browsers still render the <hr> as a horizontal rule.
<h3>Ordered List</h3>
<ol>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ol>
Continuation of the Ordered List
If you plan on breaking the list into several lists but want them to be numbered sequentially, use the start attribute start="5". This would start the list at 5 instead of 1.
list item
list item
list item
list item
list item
<ol start="6">
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ol>
Unordered List
Unordered lists is for a collection of unordered items, where the order would not change the meaning of the list. It is always used for navigation, with each menu item considered as part of the list. The unordered list is styled to remove the list style.
list item
list item
list item
list item
list item
<ul>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ul>
Definition Lists
Definition lists is for a list of terms and corresponding definitions. The term to be defined is listed first with the definition coming after the term. A term can have multiple definitions, and a definition can have multiple terms. A definition header can precede the definition.
List Header
Term 1
This is the definition of the first term.
Term 2
This is the definition of the second term.
<dl>
<lh>List Header</LH>
<dt>Term 1</dt>
<dd>This is the definition of the first term.</dd>
<dt>Term 2</dt>
<dd>This is the definition of the second term.</dd>
</dl>
The details disclosure element does exactly what you think it does. It toggles information that is initially hidden, disclosing it. It takes two tags, the <disclose> tag and the <summary> tag. The summary tag has a triangle in front of it that when clicked discloses the hidden information.
Details
Something small enough to escape casual notice.
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
table
The HTML table layout mode allows authors to arrange data — text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.
A table can have a head, multiple table bodies and a table footer. You can span both rows and columns with the rowspan="2" or colspan="2" attribute. This allows for the header to expand down and the footer to expand across in the following example.
The Caption Holds the Title of the Table
Head 1
Head 2a
Head 3
Head 2b
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
The footer is a place for information about the table.
<table id="table">
<caption>The Caption Holds the Title of the Table</caption>
<col><col><col>
<thead>
<tr><th rowspan="2">Head 1</th><th>Head 2a</th><th rowspan="2">Head 3</th></tr>
<tr><th>Head 2b</th></tr>
</thead>
<tbody>
<tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
<tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
</tbody>
<tbody>
<tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
<tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">The footer is a place for information about the table.</td></tr>
</tfoot>
</table>
Iframe
An inline frame places another HTML document in a frame. The inline frame can be the “target” frame for links defined by other elements, and it can be selected by the user agent as the focus for printing, viewing its source, and so on.
The iframe is exhibited with attributes that are determined using the equivalent CSS in the demo width: 98%; height: 300px; border: 1px solid #f000; overflow: scroll;.
<iframe src="01-html-css-primer/">height=300 width=200 frameborder=1 scrolling=yes >You need a Frames Capable browser to view this content.</iframe>
You can target any page to appear in the iframe by naming it and using the target attribute with the name target="iframeDemo" as demonstrated above. Click on the links above to load different documents.
A destination anchor is used to position the Writing HTML document at the iframe section. That requires an anchor with the same name <a id="i-frame">. See the link tag above.
<a href="01-writing-html5/#i-frame" target="iframeDemo" >Writing HTML</a>
<a href="01-absolute-and-relative-addresses/" target="iframeDemo" >Absolute and Relative Addresses</a>
<a href="01-tools-of-the-trade/" target="iframeDemo" >Tools of the Trade</a>
HTML5 tags
Before HTML5, the generic markup elements, <div> and <span>, were used to mark up the page. That means the code itself had no way of determining what the content was.
HTML5 changed that.
HTML5 standardized a lot of best practices to create semantically relevant block level tags that help organize the document. It is now possible to tell header content from the content of an article by looking at the tags alone. The most important of the new elements are: <main>,<section>, <header>, <nav>, <article>, <aside>, <footer>, <figure>, <figcaption>, <hgroup>, <wbr>.
Document Layout
<main>
<section>
<header>
<hgroup>
<h1>Name</h1>
<h2>Name</h2>
</hgroup>
</header>
<article>
<p>content <wbr> content</p>
the <wbr> tag, or Word Break Opportunity tag, is an inline tag that specifies where in a text it would be ok to add a line-break.
<aside>
<p>content</p>
</aside>
</article>
<footer>
</footer>
</section>
</main>
Adding Navigational Links
Using an unordered list.
<nav>
<ul>
<li><a href="#">link to homework</a></li>
<li><a href="#">link to homework</a></li>
<li><a href="#">link to homework</a></li>
</ul>
</nav>
Copy and paste this basic HTML5 template into a blank Textwrangler file. It has most of these elements and a basic header, so you can start coding the content right away. Repetition will acclimate you to writing HTML.
In 1945 Vannevar Bush published an article, As We May Think that helped set the stage for the pioneers who actually developed hypertext, twenty or so years later. By then, the future of the internet could more or less be predicted.
Apple comes out with the Macintosh computer in 1984. A few years later in the mid 1980’s it releases HyperCard for free to all Macintosh users, a condition specified by its creator, Bill Atkinson. Hypercard instantly provided a simulation of what the web would be in easily editable hyper-text stacks. It was a successful hypermedia forerunner to the WWW. It came with a programing language called HyperTalk that is the inspiration for javascript.
Apple’s HyperCard was used to implement an AppleTalk networked based hypertext information database system in the office of CERN where Tim Berners-Lee developed the WorldWideWeb, the very first browser to edit and see what would become the world wide web. Here is the first web site.
Tim Berners-Lee created the browser on a Next computer, using its innovative software to both render and edit web pages. It was later renamed Nexus, to differentiate it from the World Wide Web, and was released as open source in August 1991.
The World Wide Web
The very first popular browser was also inspired by HyperCard. ViolaWWW was developed that same year, and was an attempt to recreate HyperCard in X Terminals. ViolaWWW was adopted as the basis for the Web’s development till Mosaic was released, which was the first widely adopted web browser.
Netscape Navigator was created by the same people who created Mosaic, and was released just as the internet was coming out of the universities and into the public realm. Its popularity exploded and by 1994, industry pundits talked about the birth of a new ubiquitous computer experience that would be computer platform agnostic.
I still remember the heady claims in 1995, that this new medium would undercut Microsoft’s monopoly and that everything would be moved onto the web. Remember, all we had back then were slow and finicky modems that the changed the data-stream into sound, so any communication was very slow.
This challenged Microsoft’s bid for world domination, and it quickly licensed code from Mosaic to build Internet Explorer, bent on making sure that this new paradigm would never happen, or if it did, that it would be on their terms. This resulted in the historic fight for control of the web: Netscape Navigator vs Internet Explorer.
Web Standards
At the time, the visual presentation of the content was delivered by the HTML tags themselves, generally using frames and tables. Pictures took a long time to download, so they were carefully optimized and used sparingly.
CSS1 was introduced in 1996 to separate the presentation from the markup, and was further refined by the release of CSS2 in 1998. The browser manufacturers were slow to integrate these standards, as they were too busy adding proprietary features to ensnare users.
Microsoft’s forceful ways worked. It trounced Netscape Navigator’s domination of the web browser market. Internet Explorer reached 93% market penetration by 2003.
It did this by leveraging its 95% of installed computer operating system base to lock users in. Microsoft gave Internet Explorer proprietary access to the rest of the operating system.
Some think that it almost committed suicide by tying the browser into the Windows Operating System. Microsoft made the entire operating system vulnerable to all kinds of hacks.
Having lost the battle, Netscape Navigator gives up. With the race won and no competition, Microsoft stops development of Internet Explorer with version 6.5, having achieved a monopoly, but the victory would not last. Standards compliant browsers slowly began to make inroads into Microsoft’s world domination.
CSS 2.1, released in 2002, further refined this standard. It was fully embraced by the new browsers on the market.
Apple released Safari in 2003 and Firefox was born out of the ashes of what was left of Netscape Navigator in 2004, and Opera was there as well. This adoption is the beginning of standards based web design so prevalent today.
You can read the story as a comic strip presented below:
The New World
The plan was to sock it to Microsoft by creating stable web applications that could challenge both Microsoft Office and the Windows operating system. With web applications, the new paradigm would make the operating system underneath agnostic, not just for web pages, but for all computer usage.
That was the design goal of HTML5. Google developed Chrome, a browser where each window runs independent from other windows, bringing operating system like stability to the browser for the first time.
The next evolution is a change from computer based browsers to all kinds of handheld devices. Apple’s iPhone, iPad and Google’s Android operating systems are essentially internet devices that replace the desktop computer. To this end, both Apple and Google contributed much to the new HTML5 and CSS3 standards.
This is what Microsoft was afraid of, for its office suite and windows operating system generated most of its money. Though still a lumbering giant, Microsoft is no longer the monopoly it once was, and it decided to get on board.
Everyone wondered what was up when it released a public beta of a mostly standards compliant IE 9. It has since shown that is committed to open standards by releasing the IE10 beta right on the heels of IE 9.
It has joined in, helping to create new standards. That’s a solid affirmation that the future belongs to open, standards compliant computing.
The following two videos and the Zen Gardens web site are a snapshot of what the web was like in 2003. Molly E. Holzschlag demonstrates what the web looked like before CSSand after. This new world was brought into focus by the CSS Zen Gardens web site, which demonstrated the power of CSS with the separation of content from form.
The Existing Standards
While development of Internet Explorer stood still, a new crop of browsers aimed toward compliance of the HTML4, XHTML and CSS 2.1 standards, as set forward by the W3 organization, which brings us up to today.
The New Standards
Very exciting changes are here with the next generation, HTML5 and CSS3. This is, in part, because more and more interface elements are being created with HTML5 and CSS3, like the iTunes store interface, iOS apps, Android and others, so it’s possible that in the future, most interfaces will be using this most universal of languages, which places the scope of you learning HTML5 and CSS3 well beyond the browser.
Write a sentence or two expressing what you hope to achieve this semester. Include something about the teaching style that aligns best with how you learn. Are you a self learner or do you prefer everything to be structured? You will post this on the landing page you will create next week in class.
What do you Hope to Achieve Professionally? Discuss this with A.I.
Explore and strategize your future, or at least, how you plan to prepare for it by the time you do your graduation exhibition. Use OpenAI: chat or any of the many other AI large language model chats. Follow the Open AI v.3 example. Place it at the bottom of the landing page.
Your Presence on the Web
The web is a medium, like print or video. The web as medium is fluid like water running down the creek or sand held in by the walls of an hourglass. Communication and design is responsive to the many devices that may exhibit the work (from a tiny watch to the largest screen) and many circumstances as the mobile experience can happen anywhere. Print and video are passive in comparison. Web design can reach out and grab its audience through behaviors that elicit responses tailored for interactive engagement. This makes web design immediate, dependent upon satisfaction and gratification or the user will click away. A lot goes into web design.
Assignment #1: Pick a Website to Inspire Your Portfolio, and analyze it
You are to make a website. To make it stand out, pick a website that you find compelling, and analyze it. Please read Why do most websites all look the same? This is an opportunity for you to stand out. Differentiate your work. Your career depends on it.
The midterm assignment is to sell yourself. This homework is part of the research you will do for the second of seven steps of next week’s assignment, Designing for the WebChoose a professional website that represents your aspirations. For example, if you’re a photo major, pick a photographer’s website. It should be a website that represents the future you want to build for yourself.
Once you have found website(s) that represent your aspirations, analyze it. This is the starting point for thinking about your own portfolio.
Articulate who the primary target audience is. The content strategy? How should the navigation work? The visual design? Answering these kinds of questions makes you aware of the elements that go into building your own portfolio. Writing them down provides you with content to mark up.
Ideally, you become more focused on delivering your work to your target audience. That will help you focus your work in ways that can only benefit you as you leave Parsons for the real world. In the mean time, you can prepare for that day by learning to build good websites.
Intent: What is the intent of the website? Use the intent to inform all of the other qualities. This should be a short and concise statement, as in to sell skills.
Voice: What is the voice of the website? Is the site’s voice impassioned, assured, energetic, or conversational? Pick a number of descriptive adjectives that capture the experience that whoever had the site built attempted to convey the intent.
Tone: Whereas voice is consistent for the site as a whole, the tone is a contextual refinement that helps convey the content. An about page may have a different quality about it than the home page or a page in the shopping cart.
Brand: How does the website establish its brand? Is it consistent? Is it upscale, casual, youthful, objective?
Persona: Think of the many different users this website is addressing. If we were to write down the characteristics of any of these users and the label them, we would create a persona. Personas are composite sketches that reflect real-world behaviors, attributes, and attitudes of end users.
You can start with yourself, as you are one of the audiences targeted by the website. Take, for example, Naoto Fukasawa‘s website, a Japanese industrial designer. The audience can be personas representing museums, corporate clients, architects that may use his products in their work, end users, students doing assignments for a web basics class, and the list goes on.
Create 3 Personas: Personas are composite sketches that reflect real-world behaviors, attributes, and attitudes. Create a character sketch for at least three personas.
Go into the details why they would be attracted to the site, how the site informs them, and what can they do with this information. Would each of these people come back and be a repeat customer? Show how the site addresses these concerns.
Tell a story, assign each of these personas a name and personal details. By making them real, you can visualize the audience and walk them through the website. Stories activate many areas in the target audience’s brain, facts do not.
Copy Deck: In developing a website for a client, the content is often done by different people and the designer requires that all the copy for the website be assembled into a copy deck. Copy the content of the first page, break it down and label it as if it were part of a copy deck. Take a look at the SAMOCA copy deck example for guidance.
Competition: How does this website stack up against the competition? What does it have that competitor websites do not, in terms of voice, tone, brand, style, design and so on? Can anything be learned from the competition?
This exercise is meant to get you into the development process of building a website — your portfolio!
You will mark up your answer and create an index.HTML page with links and linked images that you will bring to class next week.
Posting the Assignment on your Domain
You will post the assignment on the b.parsons.edu server. Some of you may not gain access to this server right away. don’t worry about it. Just do the work and you will get on soon enough.
Turn to the Tools of the Trade article for instructions on how to set up your website.
Put a “parsons” folder inside the public_html folder.
Fetch acts like a finder window, so when you drag files into the window, they end up on your server. Unlike your finder, you replace the file when the names are the same. This is how you update files to a newer version.
Within the “parsons” folder, create a folder called “assignment-1”. The title of your web site profile should be “index.html”. It should end up in the “assignment-1” folder.
Review Writing HTML article to help you create the HTML file. I have an old assignment as a homework sample.
These videos (about half an hour) are much more fun and direct than my lectures or the Lynda.com videos. Many if not all of your basic questions will be answered by listening to either my lecture or watching these videos. Please let me know in class or email me if there is still something that is not clear. To go on without resolving what is not clear will cascade into many problems later on.
I expect you to use your root — public — directory for your own purposes. You will create a new folder and call it parsons (lowercase p) in the root directory. That is where you will develop all of your work for this class. As there is a midterm with associated assignments and a final, create two folders a portfolio and a final folder.
Web Site Organization
Index.html and Worksheet.
You will create an index.html page inside of the parsons folder that will contain the links to each of your assignments. You will place a photograph of yourself, along with your name, so I can associate your work with you as a person.
The index.html in the portfolio and final assignment folders will serve as your worksheet. This is where I expect you to document your creative development. See example. Update these files in a timely manner!
I expect your class web space to be organized exactly like this or I cannot review your work.
The web space for each student needs to work exactly the same. This is how I make contact with your work. I will be going to this page to check up on your progress once a week, so keep it current. Your grade depends upon it. Homework needs to be up the day before — so I have a day to check it before teaching, for issues that need to be addressed in class.
Even if you are not finished with the homework, upload it and show me what you have, even if it is not finished. You work is due on time, and you can revise it according to the syllabus, until the 12th week of the semester. Work not handed in on time will be graded at my discretion.
The web is a design language, and as some of you are not primarily Communication Design students, it becomes clear that there needs to be a reference that covers what Visual Design students take for granted.
Parsons students can use these links as resources for researching their projects. Visual literacy goes beyond how something looks. It makes communication more effective.
Visual literacy is used to solve problems in communication. This is a lot like structuring an argument in the academic essay, where reason supplants opinion. Instead of finding causes and reasons why, or a genealogy, bringing visually literate structuring to the communication makes the message more engaging, apparent and clear.
To that end, I’ve assembled a number of links to help develop visual literacy.
A Modernist design manual
Designer Massimo Vignelli’s life’s work through his design philosophy with a wealth of examples in The Vignelli Canon. He distributed it free on his website for everyone to become better visually educated. That site no longer exists, so I put the book on my server. You can purchase it. The Vignelli Canon represents the status quo that David Carson opposed that we will cover in Week 6)
Design Inspiration
Use the following resources to explore your site design. Be inspired — copy, borrow, steal — but make sure that whatever you take, you make your own. The top priority is to effectively communicate the content.
Canva is an online graphic design platform that lets nondesigners put together and play with designs till something clicks. You can use it instead of photoshop to prototype your design. Download it as a PDF and open it in Illustrator, and all of the elements are editable.
Invision is a web and mobile device application design platform that allows you to create and user test your designs before you commit to them with code.
Listed below are a number of issues you need to be aware of when coding for the web.
Absolute and Relative Addresses
The difference between a relative addresses or paths and an absolute address can be confusing.
The short answer is that you should build your website using relative paths. That way you can build it on your local disk and copy it to your web server and it will still work. It also allows the site to be moved from the Parsons’ B server to your own hosting service when you get around to making it part of your identity.
An absolute web address is unique on the web. That way you can go to that address when you click it, no matter where it is located on the web, hard disk, thumb drive, etc. Relative links, on the other hand, indicate locations relative to the file itself.
Anchor href and Image SRC attributes
Anchor tags <a> use the href="hyper_reference-location" attribute to hyper reference or link to another page. Images use source, the src="image-location" attribute for the image that will replace the code when the page is displayed. All attributes use an equal sign and put the value in double quotes.
Absolute References
An absolute reference or address would be the complete address, all the way back to the root. An absolute address on your computer will look something like this: file://localhost/Users/onno/aWork/Parsons_Fall_2012/03-absolute-positioning.html.
This says that the file 03-absolute-positioning.html is located in the Parsons_Fall_2012 folder, located in the aWork folder, located in the onno folder, located in the Users folder in the root directory of my computer, called localhost.
In the same way, the absolute address for this page on the World Wide Web is: http://b.parsons.edu/~dejongo/01-absolute-and-relative-addresses/. Some browsers hide http:// and there may or may not be a wwwdepending on the way the hosting service is set up. Browsers can also hide that information, so all you may see is b.parsons.edu/~dejongo/01-absolute-and-relative-addresses/.
Relative References
Relative addresses originate from the page on which it is written. Relative address directions you would give someone who asked how to get to the store a few blocks away. You would say, “Walk this way for two blocks, make a right turn, walk another block, and the store is on the left.” The directions are relative from where you are standing and giving directions.
Relative addresses are relative to the file in which they occur. If only the name is given, it assumes that a file or folder with that name is in the same folder as the file in which the link appears.
Connecting to Resources in Different Folders
If the file is located in a folder (directory), or even buried several folders down, each of the folder/directory names would have to be spelled out with a slash between each of the names. <a href="down-two-blocks/right-one-block/store-on-left"> directions to the store </a>. You get the idea.
In Unix or Linux, and I sometimes see it used in web design, a single dot with a slash./ explicitly designates the current directory.
This allows you to drill down to any and every folder or file on the website.
But what if the file itself is enclosed in a folder, and it has to go back up the directory structure?
The way to go up the directory structure to the parent folder that’s holding the file is done with two periods and a slash (signifying a change in directory/folder)../. <a href="../../index.html"> two folders up </a>.
An external CSS file located in its own CSS folder that references a picture in an image folder located in the parent directory will need to go up one level and then go into the image folder before it can access the file. The url would look something like: url(../images/file.jpg).
The ability to move up and down the directory/folder hierarchy is crucial to building web sites. Make sure you understand this before you continue.
Upper and Lower Case: Careful: the Internet Bites Back
If you do not name your files correctly, you cannot expect the internet to fix your problem. The links just do not work.
You should be made aware that the computer does not see a difference between an upper and lower case letter, a and A but to the server, they are two completely different letters. This can result in your website working correctly on your computer but when you move it to the web, the links break.
The computer also sees the space character as a completely different character %20, This%20file%20uses%20spaces so do not use any spaces when naming web files. You can use the underscore and the dash. The underscore links words together when you double click, while the dash isolates them. You can also use camel case thisFileIsCamelCase.
The space is an example of a reserved character and is changed to a percent-encoding. It also effects: " % , . < > \ / ^ ` { | } so do not use these reserved characters when you name a folder or file.
The Slash at the End of the Address
An address that ends in a slash instead of a file name often means to go to that folder, though it could also signify a custom permalink. In content management systems like WordPress, a database query like ?p=123 is replaced with a custom URL structure to improve the aesthetics, usability, and forward-compatibility of the links.
The Default Index
When a link does go to a folder, it will default to the index.html file. If there is no index.html file, it will show the contents of the folder, if the server has not disallowed that. It is recommended that you have an index.html file in every folder, as that will keep people from exploring files you may not intend for public consumption.
Refresh Does Not Update After Changes
For expedience sake the browser does not always go back to the server and shows you what is in its cache. To force a browser refresh so it looks for the files on the server, hold down the shift key while clicking on the refresh icon.
Target A New Blank Window or Browser Tab
Another oft used attribute is to target a new window if you do not want the visitor to leave the page when clicking on the link. The target attribute usually takes the new page value: or <a href="" > new window </a>.
Email Address
You can also address an email using the format <a href="mailto:dejongo@newchool.edu"> email Onno </a>.
The biggest hurdle when first coming to web design from other design fields is how to relate the process of design to coding. Hand coding is completely different from the design interfaces that you are used to. The intention of this article is to explain how to think about code so that you can design with it.
The design process in Illustrator, InDesign and some aspects of Photoshop allows for the creation and positioning of objects anywhere on the page, and in any order.
Anyone familiar enough with how these programs work will know that behind the scenes, there is a long list of instructions that make up the document.
Code looks like this linear sequence of instructions without the interface. Unless you are familiar with coding, it is hard to tell how code relates to the objects on the page. This makes it difficult to apply your design experience.
What one has to understand is that each of these lines of code is a potential design object, and can be given form.
Preparing the Content: HTML
There are two parts to this process. The first is marking up the content. HTML stands for hypertext markup language. This entails tags, or instructions, for the browser to interpret. These tags are placed at the beginning and the end of each discrete part of the content, like a <h1>for headline, <div> for division, <p>paragraph and <li> for list item. Just to make it confusing, there is also a <header>tag for headers.
For example, a header represents the area of a page, and is designated by using the header tag: <header> Header content </header>A headline has six levels, for the main one, represented by <h1> to the least important, <h6>. The paragraph: <p>paragraph content</p> and the code for a list contains both the ordered list tags and the list item tag, and looks like: <ol><li>list item</li></ol>.
Some tags are replaced by the content they represent. These are self-closing tags. They do not require an end tag. The image tag is replaced by the image itself: <img src="address of picture" alt="description of picture for screen readers, etc."> and the line break tag <br> is replaced by the line break itself. Read about the other HTML tags.
As you can imagine, the first step in the web design process, after all of the design development has taken place, is to mark up all of the content. Once the content has been marked up, it is possible to start giving the content form.
Turning the code into design elements
The opening and closing tags and the content sandwiched between creates an element or object.
All of the content must be marked up in this way and turned into objects before the design process can begin. What looks like lines of code to the uninitiated ends up being many objects, one after the other.
Without intervention, content itself merely follows the default document flow, like a word processor. It starts at the top left hand corner, moves to the right till it runs out of room and then returns to the next line, like this.
Specifying the content in paragraphs forms block level elements that simulates what happens when the return key is hit on an old fashioned typewriter or word processor. It initiates a new paragraph to start below the existing paragraph. All paragraphs stack vertically down the page.
We have just described two ways that content can flow on a page: The horizontal or inline direction is a lot like characters in a line of text. The vertical or block direction has each object come one below the other, like paragraphs.
In coding, this is done by inserting the tag for a paragraph <p> in front of the paragraph and a closing tag </p> at the end of the paragraph. Each paragraph acts just like the paragraphs in a word processor, proceeding vertically down the screen, one below the other.
In Illustrator or InDesign this paragraph could be in its own box and moved anywhere on the screen just by clicking and dragging, independent from all of the other elements or objects. This is also possible by styling the code, which becomes possible to do once you have marked up a document in to discrete elements.
CSS: Giving Form to the Content
CSS stand for cascading style sheets. Giving form to the elements in an HTML document is done by writing rules that specify a quality of the object.
In Indesign, a box is drawn by first selecting the Text Creation Tool and then clicking and dragging the mouse. It can be filled with a paragraph of text.
If it were moved to the lower right hand of the document, that would be reflected in the status boxes of the tool bar, which would provide the distance from the top left corner on the x, or horizontal axis, and the y, or vertical axis. It would also provide the width (W) and height (H) of the box.
Used the mouse to create the box, it might say X: 25p0, Y: 41p8, W: 16p8 and H: 8p4. If it doesn’t, you could tweak the dimensions of the box by changing the numbers in the toolbar.
Clicking and moving the mouse to create code is not an option if you are writing code. There are programs that will change a click-and-drag into objects that you can then move around, but we are learning how to actually do this without the help of such programs.
The same effect is done by writing a rule that specifies that the paragraph is to be absolutely positioned, allowing it to be moved so many pixels along the x and y axis irrespective of whatever else is in the document, and that it should be so many pixels wide and high.
The language used to specify the rule uses properties and values that are similar to the way we speak. We can write the code for that paragraph into the <p> using the style attribute style="position: absolute; left; 300px; top: 500px; width: 200px; height: 100px;". This specifies the paragraph just as Indesign specifies the box using numbers.
I could stroke the box with a 1 point line and add some Inset Spacing in InDesign to keep the content from butting up against the border of the box. Using the Text Frame Options Dialog Box available under the Object Menu in InDesign provides the ability to add Inset Spacing to the top, right, bottom and left.
The same border and inset spacing can be applied to the paragraph by adding the following properties to the rule: border: 1px solid black; padding: 6px;.
It is possible to select words within the paragraph. In Indesign, you select a word and give the command to make it bold. In HTML, you surround the word with inline code <em> like this: <em>word</em>.
You then define a rule that makes the inline selected content bold with the property font-weight: 700; where the weight of a character is determined from 100 to 900 in jumps of 100. It could also be specified by the keywords bold or normal. In the style sheet, the rule would look like: strong {font-weight: 700;}. It should be noted that this does not create font weights, but only specifies fonts that are available to be used.
Though it is possible to write the rules in the element tags themselves, <strong style="font-weight: 700"> that is not a good idea. CSS is designed to apply the rules at a distance. That way, all of the rules that inform how the web page is to look can then be collected in one place, an external style sheet, and all the pages of a web site can reference that external style sheet, and be styled by just one set of rules.
This is done by providing a selector in front of each rule that seeks out the element it is to style. In the example above, the name of the tag itself came before the rule. That way the rule would be applied to all <em> elements wherever they are used in the website.
Putting it All Together
The content is marked up by the hypertext markup language as discrete blocks that can be manipulated by cascading style sheet language.
These blocks can be treated as separate elements or objects, removed from the document flow, the way Illustrator or InDesign treats objects. This is not the way it is usually done, however.
That is because the web requires flexibility. Chances are that a page has to adapt to various formats, from tall and skinny to fat and wide.
To maintain that flexibility, the design elements on the page need to be organized more like a word processor rather than a page layout system used for preparing documents for print.
Think of a child stacking blocks. Now turn those blocks upside down, as if they were staking them onto the ceiling.
Instead of being fixed in their position as they are for print design, they need to be flexible and able to change hale and location, and even what they look like, depending on the context.
The word processor model allows the blocks to reflow depending on the size of the window. The window is called the viewport.
All of the elements originate from the top left hand corder of the page and moves down. They form a chain of boxes that act much like a word processor.
When one word is deleted, the rest of the sentence fills the gap. So it is with the elements in the document flow. This is what is means to be chained together from the top of the document.
Since block elements move downward by default, the challenge is how to move objects horizontally. This is like having two paragraphs next to one another. This can be done by floating one of paragraphs.
There is a lot to learn.
So Where is the Design in designing a Web Page?
The design of the layout happens before the coding begins. There is little design in the actual creation of the web page. All of the design happens before, just as it does with InDesign.
To be fair, the coding can be likened to preparing an image for print, in which the creative design has already been executed, and now the image is prepared so that it prints correctly.
The process is as follows.
Using paper and pencil to create thumbnails, develop the equivalent of stick figures in a wireframe, and then use photoshop to render it so you have something to aim for when you code. Only then do you start to code.
Coding is more like solving puzzles than designing. Unlike print, the interactivity of web pages requires a continual back and forth between designing the way it looks and coding the design.
We spend two weeks on learning how to mark up documents, two weeks on CSS, and the rest of the semester learning how to use them in a way that is professional and standards compliant.
