IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-03-structure.pdfAn...

IDM 221Web Design I

IDM 221: Web Authoring I1

Because you'll use links, lists and images in most of the web pages you develop, we'll review these topics in full detail. But first, you need to know how to code absolute and relative URLs so you can use them in your links and images.

Links, Lists and Images


An absolute URL includes the domain name of a website. When used within the code for a web page, an absolute URL is used to refer to a file in another website.

Absolute URLs

http://www.drexel.eduhttps://www.google.com/#q=html


This figure shows the folder structure of a simple website. The folders for this site are organized into three levels. The root folder for the site contains five subfolders, including the folders that contain the images and styles for the site. Then, the books folder contains subfolders of its own.

Relative URLs


A relative URL is used to refer to a file within the same website.

Relative URLs Examples

/login.html/images/logo.gif

images/logo.gifbooks/php/overview.html

../index.html

../images/logo.gif


In a root-relative path, the path is relative to the root folder of the website.

Root Relative

/login.html/images/logo.gif


In a document relative path, the path is relative to the current document. In this example, the assumption is that the paths are coded in a file that is in the root folder for a website. The first path refers to a file in the images subfolder of the root folder, and the second path refers to a file in the PHP subfolder of the books sub folder. This illustrates paths that navigate down the levels of the folder structure.

Document Relative

images/logo.gifbooks/php/overview.html


You can also navigate up the levels with a document relative path. In this example, The assumption is that the current document is in the root/books folder. The first path goes on level for the index.html file in the root folder. The second path also goes up one level to the root folder and then down one level for the logo.gif file in the images folder.

Document Relative Examples

../index.html

../images/logo.gif

../../index.html


Link Terminology Review

• Absolute URL: code the complete URL including domain

• Relative URL: based on the folder of the current page

• Root Relative: relative to root folder, starts with /

• Document Relative: relative to current document folder


href: Specifies a relative or absolute URL for a linkMost webpages contain links other webpages for web resources. To code a link, you use the <a> anchor element.

Links

<p>Go view our <a href="products.html">product list</a>.</p>


The first example uses a relative URL to link to a page in the same folder as the current page. The second example uses a relative URL to link to a page in a subfolder of the parent folder. The third example uses a relative URL to link to a page based on the root folder. And the last example uses an absolute URL to link to a page at another website.

Links Examples

<p>Go view our <a href="products.html">product list</a>.</p>

<p>Read about our <a href="../company/services.html">services</a>.</p>

<p>View your <a href="/orders/cart.html">shopping cart</a>.</p>

<p>Check <a href="http://amazon.com">Amazon</a>.</p>


Exercise !

http://digm.drexel.edu/crs/IDM221/exercises/paths


http://digm.drexel.edu/crs/IDM221/exercises/paths/index.php/index.php

By default, links are underline when they are displayed in a browser to indicate that they are clickable. When a link is displayed, it has a default color depending on its state. Four instance, link that has not been visited is displayed in blue, and a link that has been visited is displayed in purple. Later we'll use CSS to change these settings.


When you create a link that contains text, the text should clearly indicate the function of the link. For example, you should not use text like "click here" because it does not indicate what the link does.

Semantics and Usability

<a href="contact.html">Click here</a> to contact us.

Please <a href="contact.html">contact us</a> with your comments.


If you can't tell what a link does by reading it's text, you should rewrite the text. This improves the accessibility of your site, and help search engines index your site.

Semantics and Usability cont

<a href="contact.html">click here</a>

<a href="contact.html">contact us</a>


The target attribute can be used to open the linked file/page in a new window/tab. The value basically represents the name of the window; these values can be reused to load links in the same target window. The special value _blank will open a new window every time the link is clicked.

Target windows

<a href="http://google.com" target="win_search">Google</a><a href="http://bing.com" target="win_search">Bing</a><a href="http://yahoo.com" target="win_yahoo">Yahoo</a><a href="http://amazon.com" target="_blank">Amazon</a>


At the top of the long page you might want to add a list of contents that link to the corresponding sections lower down. Or you might want to add a link from partway down the page back to the top of it to save users from having to scroll to the top.Before you can link to a specific part of the page, you need to identify the points and the page that the link will go to. You do this using the id attribute. You can see that the h1 and h2 elements have been given id attributes that identify those sections of the page.

Same Page Links

<h1 id="top">Film Making Terms</h1><a href="#arc">Arc Shot</a><a href="#interlude">Interlude</a><a href="#prologe">Prologue</a>

<h2 id="arc">Arc Shot</h2><h2 id="interlude">Interlude</h2>


The value of the id attributes should start with the letter or an underscore, and, on a single page, new two id attributes should have the same value.

id Attribute

<h1 id="top"></h1><h2 id="arc"></h2>


To link to an element that uses an id attribute you use the a element again, but the value of the href attribute starts with a # symbol, followed by the id attribute of the element you want to link to. (example)

Target the id Attribute

<a href="#top">Back to top</a><a href="#arc">Arc Shot</a>


Here are two basic types list: ordered lists and unordered lists.

Lists

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul>

<ol> <li>Enter billing info</li> <li>Enter shipping info</li> <li>Confirm Order</li></ol>


To create an unordered list, you use the <ul> element. Then, within this element, you code one <li> list item element for each item in the list. By default, when the list is displayed in the browser, each item in and unordered list is preceded by a bullet. However, you can change the bullet with CSS.

Unordered lists

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul>


To create an ordered list, you use the <ol> element, along with one <li> element for each item in the list. This works like the <ul> element, except the items that are preceded by numbers rather than bullets when they're displayed in the browser. Again you can change the type of numbers that are used with CSS.

Ordered lists

<ol> <li>Enter billing info</li> <li>Enter shipping info</li> <li>Confirm Order</li></ol>


Nesting

<ol> <li>Prep materials <ul> <li>Keynote</li> <li>Notes</li> <li>Lighting</li> </ul> </li> <li>Rehearsal</li> <li>Presentation</li></ol>


Definition lists

<dl> <dt>Definition Term</dt> <dd>Definition of the term</dd></dl>


To display an image, you use the <img> element. This is an inline element that's coded as an empty tag. The src attribute of an <img> element specifies the URL of the image you want to display, and is required. The alt attribute is used to provide information about the image in case it can't be displayed or the page is being accessed using a screen reader. This attribute is also required.

Images

<img src="images/logo.gif" alt="website logo">


The images that you include in a web page need to be in one of the formats modern web browsers support. Currently, most browsers support these formats. Typically, imaging software is used to create and maintain these files for a website.

Image format

• JPG

• GIF

• PNG

• SVG

• WEBP


Photoshop Demo


examples/03-images/

Example


Now that we've seen some HTML elements used for structuring content, lets put together a simple web page that uses these elements.

Page structure


The div of span elements have traditionally been used to structure a page and to format portions of inline content.The div element is a block element that you can use to divide an HTML document into divisions. In this example, you can see that the content of the document is divided into three divisions. The first division contains the header for the page, the second division contains the main content of the page, and the third division is for the footer. For each div element, the id attribute is used to indicate the contents of the division.The other element that is presented in this example is the span element. This inline element has traditionally been used to identify content so CSS can be used to format it.

div and span elements

<div id="header"> <h1>Town Hall</h1></div><div id="main"> <p><span id="welcome">Welcome to the Town Hall</span>. We have some…</p></div><div id="footer"> <p>© 2016</p></div>


We can do better


<div id="header"> <h1>Town Hall</h1></div><div id="main"> <p>Welcome to the Town Hall. We have some…</p></div><div id="footer"> <p>© 2016</p></div>


<div id="header"> <h1>Town Hall</h1> <div id="nav"> <ul> <li><a href="about.html">About</a></li> <li><a href="about.html">About</a></li> </ul> </div></div><div id="main"> <div id="primary"> <p>Welcome to the Town Hall. We have some…</p> </div> <div id="sidebar"> <p>Upcoming Events</p> </div></div><div id="footer"> <p>© 2016</p></div>


<div id="header"> <h1>Town Hall</h1> <div id="nav"> <ul> <li><a href="about.html">About</a></li> </ul> </div></div><div id="main"> <div id="primary"> <div class="article"> <h2>Article Heading</h2> <img src="myimage.jpg" alt="a dog on a skateboard"> </div> <div class="article"> <h2>Article Heading</h2> <img src="myimage.jpg" alt="a cat sleeping"> </div> <div class="article"> <h2>Article Heading</h2> <img src="myimage.jpg" alt="a fish eating"> </div> </div> <div id="sidebar"> <div class="story"><h3>Story Heading</h3></div> <div class="story"><h3>Story Heading</h3></div> </div></div><div id="footer"> <p>© 2016</p></div>


There are already a dozen div tags. Legibility is already suffering, and the likelihood of a nesting error is growing. And this example is really only the beginning since there's barely any real content included. Also note that the div element is semantically inert: it provides no information to the browser about the content it contains and is not focus-able by default.


HTML5 includes semantic elements. A semantic element clearly describes its meaning to both the browser and the developer.

<header> <h1>Town Hall</h1></header><main> <p>Welcome to the Town Hall. We have some…</p></main><footer> <p>© 2016</p></footer>



The DOCTYPE declaration, html element and head element illustrate the way these items should be coded in every document you create. In the html element you see the use of the lang attribute. In the head element, you see the coding for the charset meta element and the title element.

Build an Example

<!DOCTYPE html><html lang="en"> <head> <title>Philadelphia Town Hall</title> </head>


In the body element, we see the use of HTML5 semantic elements. Here the header element contains one h2 and one h3 element.

<body> <header> <img src="images/logo.jpg" alt="Town hall logo"> <h2>Philadelphia Town Hall</h2> <h3>Bringing speakers to the city</h3> </header>


The main element contains one h1 element, a nav element, and a p element. Within the nav element is an unordered list that contains a series of list items. Each list item contains an anchor element. This is consistent with HTML5 semantics because a nav element should contain a series of links. It is also a best practice to code the anchor elements within an unordered list.

<main> <h1>This season's speakers</h1> <nav> <ul> <li>April: <a href="speakers/toobin.html">Jeff Toobin</a></li> <li>May: <a href="speakers/sorkin.html">Andy Sorkin</a></li> <li>June: <a href="speakers/tynan.html">Ron Tynan</a></li> </ul> </nav> <p><i>Contact Us</i> for more info.</p></main>


The HTML5 semantic elements make the structure of the page obvious.

<footer> <p> © 2016 Philadelphia Town Hall </p> </footer> </body></html>


You should use HTML5 elements whenever appropriate. Use div elements when your content needs additional styling or division and a semantic element is not available or appropriate. Here is a list of some of the commonly used HTML5 semantic elements, a full list and descriptions of when to use them is available online.

HTML5 elements

• header

• nav

• main

• aside

• footer

• section

• article

• figure

• more


http://www.w3schools.com/html/html5_semantic_elements.asp

examples/03-structure

HTML Structure Example


The table consist of one or more rows and columns. Need define a table by defining it's rows. Then, within each row, you define a cell for each column. Within each row, a table can contain two different kinds of cells. Header cells identify what's in the columns and rows of the table, and data cells contain the actual data of the table. In broad terms, the table starts with the header that can consist of one or more rows. Then, the body of the table presents the data for the table. Last, the footer provides summary data that can consist of one or more rows.

Tables


To create a header, you simply code the rows that make up the header between the opening and closing tags of the thead element.

<table> <thead> <tr> <th> Books </th> <th> Year </th> <th> Sales </th> </tr> </thead>


Code a body by coding rows with a tbody element.

<tbody> <tr> <td> PHP & MySQL </td> <td> 2014 </td> <td> $372,381 </td> </tr>  </tbody>


Code a footer by coding rows within a tfoot element.

<tfoot> <tr> <th> Total Sales </th> <td> </td> <td> $2,154,786 </td> </tr> </tfoot></table>


<table> <thead> <tr> <th> Books </th> <th> Year </th> <th> Sales </th> </tr> </thead> <tbody> <tr> <td> PHP & MySQL </td> <td> 2014 </td> <td> $372,381 </td> </tr>  </tbody> <tfoot> <tr> <th> Total Sales </th> <td> </td> <td> $2,154,786 </td> </tr> </tfoot></table>


A form contains one or more controls like text boxes, radio buttons, lists, or check boxes that can receive data.

Forms


You should code the name attribute to uniquely identify each form and control. When a form is submitted to the server for processing, the data in the controls the sent along with the request.

<form name="email_form" action="subscribe.php" method="post"> <div class="form_control"> <label for="email">Email: </label> <input type="email" name="email" value="" placeholder="email address"> </div> <input type="button" name="submit" value="Subscribe"></form>


The first button is a generic button, defined by setting the type attribute to "button". When the user clicks this type of button, client-side code is usually run. For instance, JavaScript can be used to validate the data on the form. Then, if the data is valid, the script can submit the form to the server.The second button is a submit button. When it is clicked, the form is submitted to the server for processing. Unlike a generic button, a submit button sends the data to the server automatically without using client-side code.The third button is a reset button. When it is clicked, the values and all of the control on our reset to their default values.The fourth button is an image button. It works like a submit button. The difference is that an image button displays an image rather than text. To specify the URL for the image, you use the src attribute. To specify text if the image can't be displayed, you use the alt attribute.

Buttons

<input type="button" name="message" value="Alert Me"><input type="submit" name="checkout" value="Checkout"><input type="reset" name="resetForm" value="Reset"><input type="image" src="images/submit.jpg" alt="submit button">


There are several types of text fields. For example, text, password, email, etc. A normal text field except input data from the user. Then, when the form is submitted, the name and value attributes are passed to the server. The password field also excepts input that that is submitted to the server, but the entry is up scared but bullets.

Text inputs

<input type="text" name="username" placeholder="Your name"><input type="email" name="email" placehodler="Email"><input type="password" name="userpw" placeholder="Password"><input type="URL" name="URL" placeholder="Website">


Review the links in the resources section to learn more about the available inputs and attributes that can be used to build a form.

Inputs, labels, fieldsets


An iframe like a window on your page. It uses an inline frame to embed another document within the current HTML document. Common uses include Google Maps, YouTube/Vimeo video.

iFrames

<iframe src="http://www.w3schools.com"></iframe>

<iframe width="480" height="360" src="https://www.youtube.com/embed/ZqkfMeut_QY" frameborder="0" allowfullscreen></iframe>


For Next Time

Date post:	02-Jun-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

IDM 221 - Drexel Westphaldigm.drexel.edu/crs/IDM221/presentations/pdf/IDM221-03-structure.pdfAn...

Documents