Week 2: More HTML and Intro to CSS
Today we are learning to use a code playground called Codepen.io to test snippets of code online. A code playground lets you quickly try out pieces of code and see how it works without creating a new webpage every time. Nucamp uses it to help with learning. Codepen is the best place to build, test and discover front-end code. Codepen.io is a social development enviroment for front-end designers and developers.
DOM- The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents:
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
About HTML Tables
In the early days, pre-CSS HTML, tables were often used to position content. I remember those days when first building web pages. You can see examples here below that was built with tables by me using Photoshop and Dreamweaver at that time. The buttons had rollovers using JavaScript. The main eye catcher animation image was done with Adobe(Macromedia) FLASH which we do not use anymore. These sites are long gone. No longer in business.
Today, CSS is used for layout and tables have returned to their original purpose: to display in tabular format.
About tables. All HTML tables start with the <table> element. Inside it, rows are declared with <tr> (table row). Inside, it cells are declared with <td> (table data). The table content goes in <td> cells only. Here is an example:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Now we add some more elements for tables.
<thead> element contains at least one <tr>, which in turn contains <th> elements that hold table header info. <th> is bold and centered by default, can also be used inside <tbody> when applicable. <tbody> element hold <tr> and <td> rows containing table data.
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Charles Shepherd</td> //Yep, I wrote a book!
<td>2012</td>
</tr>
<tr>
<td>The Martian Chronicles</td>
<td>Ray Bradbury</td>
<td>1979</td>
</tr>
</tbody>
</table>
Now will add in rowspan and colspan attributes to a <th> or <td> element to cause it to span X number of cells. e.g. rowspan=”2″
Look at this example below using rowspan and colspan:
<table>
<tr>
<td rowspan=”2″>1</td> //Rowspan example
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
<table>
<tr>
<td colspan=”2″>1</td> //Colspan example
<td>2</td>
<td>3</td>
</tr>
What are forms?
HTML form elements allow users to interact with the website by entering data rather the being passive consumers of data. There are many types of forms. They can be short or long – ex.: Google basic search vs advanced. The Google page www.google.com is an example of a short form. The Google advanced search is an example of a long form. Forms have one or more input fields/dropdowns/ or other ways to enter data, along with a way to submit that data to the website, typically through a button. Usually data is sent to web server, which handles it & sends a response. Examples are: Google’s web servers will retrieve search results and send them back to the browser, as shopping site’s credit card information form will try to validate the card, etc…
Look at this basic form and note it does not show a fully working example.
<form>
<input type=”text” />
<input type=”submit” value=”Go” />
</form>
<form> is a container element, formally defines contents as a form. <input> is a versatile element commonly used in forms.
attribute type=”text” creates text box for user input.
attribute type=”submit” creates button to submit the form.
Next to submit your form to a server you need two elements:
<form action=”URL to send data to” method=”get or post“>
The action attribute: URL on a server that should run a server-side script (a small program, such as PHP or JavaScript) to handle the form submission.
Now you need, method attribute: “get” or “post“
– “get” to send requests for data from server, such as a search query
– “post” to send data to server, both text and binary data such as images, any sensitive data that needs to be encrypted such as passwords.
input elements should always have a name attribute, which tells the server what the data is, and should be a single word with no spaces.
input elements can have a value attribute, which can be a default value to submit, also used for submit button text.
input elements can have a placeholder attribute, which puts a greyed out placeholder text in the field which can’t be submitted. It is basically a hint text to user about what to enter.
Another input element attribute is required: Boolean, inputs with this attribute must be given a value before the form can be submitted.
<input> TYPES
- text: default input type, single line text field.
- submit: submit button with input’s value as button text, sends form data to URL specified in form’s action attribute
- checkbox: click to select
- Single checkbox input – no value needed
- Group of multiple checkbox inputs – value needed and names can be shared
- radio – click to select, use two or more grouped together to work. If in the same group, should have the same name but different values.
Output of code:
- range: slider for a range between min and max values
- color: color picker
- file: file upload (Note: When this is used, you need in the form action: enctype=“multipart/form-data”)
Output of code:
More Form ELEMENTS
<fieldset> is used to group sets of form controls together.
<legend> is used to set a caption at the top of a <fieldset>
Look at this example below for fieldset and legend:
<textarea> is used for multi-line input form control. Control number of visible lines with rows attribute, width (number of characters per line) with cols attribute. Always set name attribute; can set placeholder but not value attribute; if you want default text, place between tags.
Look at this example below for <textarea>:
You can create a dropdown list from <select> and <option> when used together. <select> element contains a set of <option>s, requires name attribute. Each <option> surrounds a dropdown text option; each valid option requires a value attribute.
Look at this example below for a dropdownlist:
<label>
You should surround a form control’s caption text in a <label> element. Associate the label and form control by giving the label a for attribute and the form control an id attribute, then set their values to match. Then if the label is clicked or touched, the associated form control will become focused – easier to hit, more accessible.
For example look at this:
Output below. By using the label, if you click on the text you bring to focus the input field which is good for touch devices. It is best practice to use the label when possible.
Additional Resources
