Developing web pages with HTML and CSS

These are notes I have been using to teach building web applications, https://github.com/jseller/repo

That is a very large topic that is too much for one post. So, for easier learning this has been split into four parts:

1. Web page development 
1. HTML, the fundamentals of HTML, CSS and JavaScript
2. Understanding communication between the browser and a web server. 
1. using HTTP and and a server API
3. Building web applications 
1. Patterns for building web applications that service requests from the front-end and save data
4. Data and databases
1. Structuring data and making scale-able applications

We are going to build a simple web app that explains some fundamentals so you can see how everything works together. First we are going to build a page, and move to the middle tier of logic and the bottom tier of data persistence. These concepts require a much more thorough knowledge of networks, operating systems and databases. We will get there; but lets start with a simple page.

Front-end

The web page is the visual 'front-end' of you web application. This is what the user actually sees and interacts with. Its like looking at a house, car or a device. For all the technology that is happening under the covers, it's the first impression of just looking at it that can make or break its success. So, it may be a good idea to think of the web page as the decoration and design of the house interior. The walls have to be built, but it makes the room much nicer if the walls were painted and decorated. This highly visual work demands a view from the design and customer side more than the machine running it. The use of graphics and graphic artistry play a big part in successful web development, but the success is really how usable it is. The experience the user has to solve their problem or need is what determines success. This is the X in the terms 'UX' or 'CX'  that you may have seen before.

Get Started

Here we learn how to develop a web page with just enough HTML, CSS and JS to understand the fundamentals. The tools we will use are a text editor and a web browser.

• First basic HTML, and understanding how a web page is just a document
• Then add CSS, and learn the browser visually formats the HTML
• Then add Javascript, and learn how we can add interaction to the site and the basic programming behind responding to users actions

HTML

The Browser

You have a browser on your computer, and this is the window you view the world wide web through. Its Chrome, or Firefox, or Safari, or Internet Explorer, or Lynx.

1. Start it up and go to this site
2. View source
3. Save as a web page
4. Go to the folder that you save the page
5. open the file with your web browser.

Websites are just html files on another computer. 

The Editor
You have an editor on your computer; its called Notepad or TextEdit. While these can edit and save documents they don't have a whole lot of extra features. Document editors like Word have many formatting features for documents. For this exercise we are use Sublime Text editor, but notepad++ or Atom are useful in the same way: they highlight the HTML, CSS and JS so you can easily see what parts of the page are for the browser and what is the text or pictures that the user can see.

1. Start your editor
2. Open the file you saved
1. Files have types and this lets the computer know what to use. html files are processed by a web browser.
3. See the mix of html and text, this should pretty much match what you saw in the 'view source' option in your browser
4. Flip back and forth between your editor and your browser, so you are using both tools to see the same file. 

Change the web page

1. Put your name in the paragraph tags
1. save the file and refresh the browser
2. Add a heading. There are different headings, h1, h2, and they get smaller as the numbers increase.

You can see at this point that the 'elements' you are putting around the text don't show up in the browser; they are there to tell the browser how to display the text in-between. These should be familiar if you have used any document editor before. Paragraphs, headings, bold, italic, etc. This is because the first version of html was made to show documents (actually academic papers)

Add a list of things

There are ordered lists and un-ordered lists. Add one to your page

Add an image 

Images really make a web page come alive.

Add a link to another page

This is really the core concept of the 'web' of pages that we have today. You can tell the browser to load any web page on the web by adding a link. When the user clicks the link the page is loaded.

HTML Guidelines

Web pages have come a long way. What was originally just a way to format text documents has evolved into the application development user interface it is today. That's a large evolution in a short period of time!

To keep up with the the HTML specification has evolved to add many more standard elements. You could actually just use 2 elements to replicate what the standard document elements do, but you need to tell the browser the rules to display them. This is what style sheets, or Cascading Style Sheets are for.
What elements are these building blocks? they are 'div' and 'span'. Think if the div as the structural element that contains a specific part of the page, and the span as a way to change the presentation of the elements within a div.

• div as structure, span as presentation

Also, with the class or style attibute on the elements defining the presentation of the element, there is also the 'id' that uniquely identifies the element in the entire page. This will become very important when we add javascript to the page later.

• use class to style the element and ids to identify the elements. This way you can change the look and feel of the page by just changing the CSS and not the html

CSS

Yes, everything is better with a little bit of style, and your web page isn't any different!

StyleSheets came around when web pages were pushing past the original paradigm of the text document, and the limitations of that in creating visual experiences. Different fonts, colors, sizes were needed to show the elements of the document in a visual way.

• add a style section to define some rules for the elements in your page

Notice we are adding the rules to the page itself, and the page is getting larger, but not too unmanageable. Now imagine a much more complicated website with many rules that could apply to each element. That style section would get too large to easily navigate. To solve this you can (and should) put your style definitions in a separate CSS file and refer to it in your base page.

Also notice that you can add style as an attribute to any html element and the style rules will apply to just that element. This becomes hard to manage as you will want to change style rules that affect the entire document; and changing many of these definition would be hard to manage when the page gets more complex. Its a great idea to define the rules once, and use the class attribute to declare what style rules the element used.

• try not to style specific elements, but instead define rule for them separately. its much easier to manage when things get large.
• Caveat for html emails. For nicely formatted html emails you have to have all the elements and style definitions in the same file so the email readers have a chance of showing the content consistently.

CSS

CSS: use ID for structural selectors and class for presentation selectors
structural elements by id - how the block elements align themselves in the entire document
presentation element by class - color, margin, border, alignment within the element

Name style by content 

dont do: .red{color:red;}
do .error{color:red;}\

Wrap it up

Making web pages is fun, and to make complex front end applications its really important to understand the basic fundamentals of markup languages and the formatting of them for effective application presentation