web design essentials presentation edited and organized by dcc shpe -teagan pollard -jessica lopez
TRANSCRIPT
Web Design EssentialsPresentation Edited and Organized by DCC SHPE
-Teagan Pollard
-Jessica Lopez
Table of contents
Development From Scratch:• HTML file structure. (head / body / boilerplate /
div’s / brace setup)• CSS Styling. (file structure / button animations /
gradients / transitions)• Inline frames.• Javascript Programming.
Development With Assistance:• Wordpress
Good Development Techniques:• Site weight• Image rendering
Development From Scratch
Developing a website from scratch using a text editor is much more flexable and customizable than building a site using a site builder. For those users who crave the power to adjust and modify a site to their liking, a text editor is usually the way to go.
HTML Page Setup & File Structure
• HTML is essentially the framework of the internet.
• HTML creates the boxes which are styled and filled with content to create a finished page.
• Everything on a site that is static is usually done in html (frames, boxes, content areas, etc).
• A html document has 4 required sections: doctype declaration, html, head, and body.^ Simplest html file you can make
^
HTML is a language of containers
• Each html element has an opening and closing brace to mark where an object ends.
• Closing braces are the same as opening braces, just with an added slash before the element name in the cose.
• Some tags, including the <img> tag for images, doesn’t have a closing brace. But are rather has a single brace ending with a slash to close it.
Ex: <img src=“my.jpg” />
<body>
<div id=“header”>
<img src=“heading.jpg” />
<h2> My Heading under image </h2>
</div>
<div id=“content”>
<p> A paragraph of text within a division
</p>
</div>
</body>
Elements & Attributes
• Each set of braces used for content display is known as an element. Attributes can be added to the opening brace of any HTML element.
• The most important attributes are id=“” and class=“” because they enable you to distinguish an element or group of elements for individual styling.
<element attribute1=“value”
attribute2=“value”>
</element>
ex:
<a href=“dl/download.pdf”
class =“dlButton”
id=“dlBtn1”>First Download
</a>
Some Useful HTML Elements
• Anchor tags create a link for users to click. Can link to a file on the site or another website.
• Image tags place images onto a page.
• Unordered lists build sequential lists out of line items.
• Dividers create blocks to put content in with a specified height and width.
• Tables create rows and columns of differing heights and widths depending on how it is set up.
<a href=“somelink”>Click</a>
<img src=“img.jpg” />
<ul> <li>ListItem1</li>
<li>ListItem2</li> </ul>
<div id=“maintext”> </div>
<table><tr><td></td>
<td></td>
</tr>
</table>
CSS Styling Language
• CSS (Cascading Style Sheet) is a plain text file format used by web pages to help keep information in the proper display format.
• A CSS file contains all display settings and simplifies HTML by allowing for multiple HTML files to reference a single stylesheet.
• CSS can be applied using 3 different methods:• Inline css is written in a documents head
section inside of <style></style> tags.• External css is written in a separate file. and
linked with a link tag: <link type=“text/css” href=“stylesheet.css” />.
• Internal css is written inside the opening brace of a specified html element.
CSS Files define various styles of the html elements including:• Borders• Colors• Font• Size• Spaciang• Height• Width• And many more!
CSS Syntax
The syntax of CSS consists of three parts:
selector {property: value}• Selector: HTML element (tag) to be defined (e.g:
body, paragraph)• Property: display property (e.g: color, size, font,
etc.)• Value: assignment that a property receives (e.g:
red, 12px, Arial, etc.)
• Using classes and id’s which are assigned in the html, we can style specified html elements with specified css, rather than referencing the html element name which will style every one of those elements.
Ex:
body {
background-color:#FFFFFF;
text-align:left;
}
.classname {
font-family:calibri;
color:blue;
}
#idname{
height:100px;
width:50%;
}
CSS File Linkage and Usage
• Internal styles can also be embedded in a document through the <STYLE> element (tag)
• The style tag is placed in the document HEAD • Type attribute is required to specify a media
type text/css (for a CSS file)• Used for single page design
• Style sheets can also be imported with CSS’s @import statement
• The statement can be used within the CSS file or in the <style> tag
• if used within the css file, @import statements must go firsts
There are three ways to link ato an HTML document: externally, internally, and inline.
External style sheet is linked through the <LINK> element (tag). The link tag is placed in the HEAD of document.
Inline styles are places within the opening brace of an html element and are specified within a style attribute
Using Inline Frames
• Inline frames allow you to nest a frame into a page which can contain an external link, or even another file.
• Inline frmaes are useful if you want to link a file, page, or site inside of a frame on a page.
• Using inline frames we can use xml and xsl styling.
<iframe style=“ height:600px;
width:1000px;”
src=“http://www.google.com”>
</iframe>
^ Creates a frame on a page with a width of 1000 pixels by 600 pixels that displays google.com.
Javascript Programming
• Javascript is the primary scripting language in web development.
• Thank to it’s multipurposed design, javascript is flexable enough to handle most web based tasks well.
• JS can be implemented into html via 2 simple methods: Writing the javascript within a <script></script>
<script> Javascript code </script>
<script src=“scriptfile.js”> </script>
Javascript usage
• Javascript is a multiprosed scripting language which can interact with html elements through the DOM (Document Object Model).
• Using javascript methods, we can transverse the DOM and target specific html elements for editing.
Document.getElementByID(homeTXT)
OR
Document.getElementsByElementType(div)
Development With Assistance
Today there are many site-builder web sites and programs. People who are less versed in HTML and coding can develop web content with ease using these programs and services. Using site buiders usually means taking out a bit of customizability and control, but is good for users who arent obsessed with the exact placement of each item, but rather their functionality.
Wordpress: Blogging platform / CMS
1. Word Press currently runs more than 66 million websites. Some of those sites include CNN, TechCrunch, Forbes, and many other popular sites that you probably use or see every single day!
2. Nearly 17% of the websites in the entire world run thanks to WordPress. Word Press is the biggest site of its kind on the planet. That’s quite an accomplishment!
3. More than 19,000 Word Press plugins are available – 19,000!
4. Wordpress has one of the best GUIs to start making your own website5. Word Press is the preferred source for bloggers and freelancers. In fact, the going rate of a WordPress designer project is around $60 per hour – got WordPress design skills?6. Little to no coding is actually required to use wordpress, So its easy for beginners to use.
Good Development Techniques
There are some basic limitations to what a website can do, if a site is designed improperly, users can experience extended load times and even intermittent site failure alltogether. Using good techniques with media usage on a site is essential for good site performance.
Site Weight Management
• Website weight refers to the total byte usage of all files on a site.
• Using optimized media can seriously impact site weight due to the generally large file size of media items.
• We can compress images, audio and video to reduce site weight as well.
• Using services like webpagetest.com we can get all kinds of data on where we are losing performance.
Photograph and media Rendering
• All photos used on a website should be rendered in the same pixel ratio/density as the original photo.
• If you display a photo as 300px wide when it a photo of 350px wide, the site needs to compensate, which hurts load times.
• Loading a few images out of ratio is not the end of the world, but after a hundred, or a few hundred images, you could seriouosly hurt loading times.
Putting It all to good use
What use would a bunch of code snippets be if they are never shown in a real world format? Through example we will show you what it looks to actually put together some html into a functioning (although simple)
website.