MySuccess Website Designer Associate - ICE Malta · MySuccess Website Designer Associate Version...

MySuccess Website Designer AssociateVersion 2.0

Topic 5 - Further HTML & Forms

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 4 | Slide 2

In This Topic

• Further HTML

• Tables.

• Block Elements vs Inline Elements.

• Images and Videos.

• Templates.

• Forms.

Further HTML


Tables

• HTML features a <table> tag that can be used to represent tabular information.

• Rows in the table are created with <tr> (Table Row).

• Columns are created with <td> (Table Definition).

• Table headers can be created with <th>.

• You can also specify the separation between the table’s header and body using <thead> and <tbody> respectively.

• Let’s create a table for a new article in Joe’s blog.


Tables

• Note how the table is displayed without borders.

• We normally display borders using CSS, however for now we can add the border attribute to the <table> tag with a value of 1.

<table><thead><tr><th>Language</th><th>Invented By</th><th>Released</th></tr>

</thead><tbody><tr><td>FORTRAN</td><td>John Backus (IBM)</td><td>1957</td></tr><tr><td>C</td><td>Dennis Ritchie (Bell)</td><td>1972</td></tr><tr><td>C++</td><td>Bjarne Stroutstrup</td><td>1983</td></tr><tr><td>Perl</td><td>Larry Wall</td><td>1987</td></tr><tr><td>Python</td><td>Guido van Rossum</td><td>1991</td></tr><tr><td>Java</td><td>Sun Microsystems</td><td>1995</td></tr><tr><td>JavaScript</td><td>Netscape Communications</td><td>1995</td></tr><tr><td>PHP</td><td>The PHP Team</td><td>1995</td></tr><tr><td>C#</td><td>Microsoft</td><td>2000</td></tr>

</tbody></table>

<table border="1"><thead><tr><th>Language</th><


Tables• Sometimes you need to create table cells that span multiple columns, similar

to the ‘merge cells’ feature found in most word processing software.• This can be achieved using the colspan attribute of a <td>, as show below:

• The colspan attribute was given a value of 2, meaning this cell is as wide as two columns.

• The row ends up having two cells instead of three, but is still as wide as the other rows.

• We use <tfoot> to specify the table’s footer in the above code.

</tbody><tfoot><tr><td colspan="2">Years of innovation</td><td>43</td></tr>

</tfoot></table>


Tables• Similar to colspan, rowspan allows a cell to span multiple rows.

• Prior to CSS positioning, web designers would use tables to create the layout for their entire website.

• However, as of CSS positioning, this is seen as bad practice.

<tr><td rowspan="2">Java</td><td>Sun Microsystems</td><td rowspan="2">1995</td></tr><tr><em>Sun Microsystems was then purchased by Oracle.</em></tr><tr><td>JavaScript</td><td>Netscape Communications</td><td>1995</td></tr>


Block vs Inline Elements• In HTML, items are displayed as block elements or inline elements.• A block-level element always starts on a new line and takes all width

available.• The <h1> to <h6> tags, as well as the <p> tag are block elements.• The <form> tag, used to create forms, is a block element we will discuss later.• The <div> tag is used to create divisions in your document, usually as a

container for other elements.• For example, we can surround each of our blog articles with a div.


The <div> Tag

• The <div> makes no visible difference for now, but it can be very useful for styling blocks when we start using CSS.

<div><h4>Redundant Langauge</h4><p>Lately, I've been thinking a lot about redundant language; words or phrases we use that are unncessary in

both spoken and written language. Take a look at this sentence, "<em>It is absolutely necessary for you to register before the event</em>". If registering for the event is necessary, then why use the word <em>absolutely</em>? The word <em>necessary</em> implies that something must be done, so adding the word <em>absolutely</em> as a prefix is, well, unncessary.</p> <p>Another common example of redundant expression is a duplicate definition: "<em>The discovery of a new species of plant on the Galapagos Islands was an unexpected surprise</em>". If the discovery was an unexpected surprise, then what exactly is an expected surprise?</p><p>Here are some common redundant expressions:</p><ul><li>ATM machine.</li><li>PIN number.</li><li>Absolutely essential.</li><li>Exact duplicate.</li><li>Difficult dilemma.</li><li>10 a.m. in the morning.</li><li>Different varieties.</li>

</ul><p>If you want to learn more about redundant expressions,

check out <a href="http://blog.oxforddictionaries.com/2011/07/redundant-expressions/" target="_blank">this post on Oxford Dictionaries</a>.</p></div>


Inline Elements

• Inline elements do not start new lines, and only take up as much width as necessary.

• The <a> tag is an inline element.• The <img> tag, used to insert images, is an inline element we will discuss

later.• The <span> tag is analogous to the <div> tag, except it is an inline element.


Images• The <img> tag can he used to insert images in your page.• First, let’s create a folder for our images in our site.• Right-click on the site in the File Browser and select New Folder. Call the

folder img.• Place any image in this folder. You can drag directly to the Dreamweaver

interface.


Images• Now we can insert our image.

• The src attribute specifies the image file name, and the alt attribute is a description of the image, used by screen readers to describe images to the blind and visually impaired.

• It is bad practice to not include the alt attribute.

<p>Whilst some of these languages were created by companies, each language had a senior designer, such as Dennis Ritchie at Bell Labs, who pretty much invented and developed the language alone.</p>

<img src="img/dennis_ritchie.jpg" alt="Dennis Ritchie, Inventor of the C programming language">


Images as Links• You can make images clickable, just like hyperlinks. • For example, let’s direct the user to more information about Dennis Ritchie

when he is clicked.

• Hovering over the image with a mouse will change the mouse cursor, however there is no other indication that the image is clickable.

• This is bad practice, but is used here for demonstration purposes.

<a href="https://en.wikipedia.org/wiki/Dennis_Ritchie" target="_blank"><img src="img/dennis_ritchie.jpg" alt="Dennis Ritchie, Inventor of the C programming language">

</a>


Videos• The HTML5 <audio> and <video> tags are discussed later. • However, you may want to embed videos from a video sharing site such as

YouTube.• From any YouTube video, click Share > Embed.

• Copy the code given and paste into your site.• This will embed the video in your page.

Templates

Templates• Let’s create a very basic menu, that we will style later on with CSS.

• Now, let’s create a stub for the about page. To do this, it’s best to create a template.

• A template is a definition of items in the site which are common to all pages of the site – such as the footer, header and navigation bar in our case.

• When you create a template, you define regions that you want to be editable, whilst the other regions remain fixed for the entire site.

• This is a Dreamweaver feature.

<nav><a href="index.html">Home</a><a href="about.html">About</a><a href="contact.html">Contact Me</a>

</nav>


Templates• Click Insert > Template > Make Template.

• When asked to update links, click Yes.• A new file with a ‘dwt’ extension will be created.• By default, the page title and <head> section will be made editable:


Templates• Now let’s make everything in the page beneath the navigation bar and above

the footer editable.• Select all code from the first article’s <div> to the last article’s </div>.• Click Insert > Template > Editable Region.

• Dreamweaver will add the template markup.• Save your template.


Templates• Now let’s create an about page based on this template.• Click File > New.• Choose ‘Site Templates’, then select the normal template we created.

• Note how certain content is now non-editable.• Furthermore, changing the template will also update pages using it.


Templates• Now, save this page as about.html.• We should now also make the index page use the template we created –

luckily this is easy.• Create a new page based on the normal template, and save it as index.html,

replacing the existing file.

• Let’s clean up the template. Remove all content from the ‘PageContent’ editable area, and replace with a placeholder.

• Also remove the nav bar comment from the page header.


Contact Form• We are now going to create a contact us page with a contact form.• First, create a new page based on the normal template, named contact.html.• Now, let’s add a basic form.

<form name="contactForm" method="POST" action=""><p>

<label for="firstName">Name</label><input type="text" name="firstName">

</p><p>

<label for="lastName">Surname</label><input type="text" name="lastName">

</p><p>

<label for="email">E-mail</label><input type="email" name="emailAddress">

</p><p>

<input type="submit" value="Send"></p>

</form>


Input Elements• The form we have created uses a number of input elements. • Each input element is used to capture a different type of input from the user.• Here are the traditional input types (HTML5 types will be covered later).

Input Type Descriptiontext One-line text input field

password One-line protected input field

submit A button for submitting form data to the form’s action attribute

reset A button to reset form values to their default values

radio Defines a radio button (single select)

checkbox Defines a checkbox (multiple select)

button Defines a button

• In the form, the labels are associated with the input by having their forattribute set to the name of the input element.


Input Attributes• Each input element supports a number of attributes.

Attribute Descriptiondisabled The input field should be disabled

maxlength Maximum number of characters for an input field

readonly Value of field cannot be changed

size Width (in characters) of an input field

value Default value for an input field


Radio Buttons & Checkboxes• Let’s add some more fields to our form.

• By having the same name attribute, the browser knows to allow either the Business or Other radio buttons to be selected.

• More than one checkbox can be selected. In our case, this is to allow the user to subscribe to our newsletter.

• It is bad practice to automatically check subscription checkboxes.

<p><label for="queryAbout">Your query</label><input type="radio" name="queryAbout" checked>Business<input type="radio" name="queryAbout">Other

</p><p>

<input type="checkbox"> Please subscribe me to Joe Doe's Newsletter</p>


Text Area & Drop-Down List• Let’s add a drop-down list to ask the user how they heard about us.

• You can choose an option to be selected by default by adding the selectedattribute.

• Now let’s add a text area so the user can type their query.

<p><label for="channel">How did you hear about us?</label><br><select name="channel">

<option>Search engine search</option><option>Referred by a friend</option><option>Saw advert</option><option>Social media</option>

</select></p>

<p><label for="query">Your Query</label><br><textarea name="query" rows="10" cols="80"></textarea>

</p>


Form Method and Action• Our form is now complete, but how will it send the message back to us?• We would need to create a script using a server-side language such as PHP,

ASP.NET or JSP. The name and location of this script would then be added as the value of the form’s action attribute.

• HTTP supports several methods, POST being intended for sending data, and GET being intended for retrieving data.

• The form’s method action is set to POST since we are sending data.


Questions?

MySuccess Website Designer Associate - ICE Malta · MySuccess Website Designer Associate Version...

Documents

Transcript of MySuccess Website Designer Associate - ICE Malta · MySuccess Website Designer Associate Version...