Introduction to Web Design, HTML & WordPress. What is Web Design? Web Design encompasses many different skills and disciplines in the building and maintenance.

Introduction to Web Design, HTML &

WordPress

What is Web Design?Web Design encompasses many different skills and disciplines in the building and maintenance of websites.Web Design focuses on graphic design, user interface design, user experience design, authoring and SEO (search engine optimization).

What is Web Design?Many different programming languages/codes used for web design: HTML, PHP, Javascript, ASP.NET, C++, C# etc.

What is Web Design?Many tools are available to assist in building web sites.

HTMLProgramming Language

Programming Languages are artificial languages used to communicate instructions to a machine. You (the programmer) type a command and the machine does the work.

HTML is the main programming language for creating web pages viewed by a web browser. Stands for HyperText Markup Language. Hypertext is text

(words) that allow the viewer to click and be sent to more information, images, new page, etc.

Common web browser’s: Internet Explorer, Firefox & Chrome HTML allows the text to be formatted (color, size, location, etc.),

in the web browser, to meet the programmer’s needs.

How Does HTML Work?

HTML uses tags that describe to the browser how the information being displayed should look or act. Tags are a specific list of words, letters, numbers or symbols

framed by <>.

This is the HTML tag for making a word bold: <B>

There must be a start and end tag. This way the browser knows where the bold wording starts and ends. An end tag looks like this: </B> Adding the forward slash makes it an end tab.

Example: The <B>Tobin</B> is my favorite place.

The Tobin is my favorite place.

Let’s Try Using HTML

Open up a new text file.

Write a sentence or two and then put the bold tags to work for you.

<B> to tell the browser where to start making your words or letters bold.

</B> to tell the browser to stop making them bold.

When finished with your markup. Save the file as:

YourName.html

Viewing HTML Code

You can view the HTML code for any website you visit. Goto: www.TobinCommunityCenter.org/

Right click with your mouse on any area that does not contain information (images, text , etc.).

Select “View Source” or “View Page Source” depending on the web browser you are using.

A new window will pop up with all of the code that was written to make the page you are visiting.

Web Design Tools WYSIWYG HTML Editors:

Adobe Dreamweaver & GoLive Microsoft Expression Web Coffeecup …and tons more

Graphic Design Software: Adobe Photoshop, Illustrator, etc CorelDRAW & Paintshop Pro

Content Management Systems: Software that allows you to create, manage, store & display

“stuff” on web pages. WordPress Joomla Drupal

What is WordPress?

WP is a Content Management System (CMS) used for posting information on the internet. Built on PHP and HTML.

Was initially used exclusively as a blogging platform, it has become popular as a way to create regular websites too.

WP contains a built-in WYSIWYG editor that allows you to create and grow your website with ease.

According to a 2011 study, approximately 22% of all new websites use WordPress as a platform.

How much does WordPress cost?

Using WordPress software is free, as it is an open-source product.

Open source software: created by multiple contributors in a public manner. The source code is made available to everyone and users are free to study, modify, and even improve the software.

Other examples of open source software:

• Mozilla Firefox (web browser)

• Android (operating system for mobile devices)

• OpenOffice (word processing, spreadsheets, etc.)

Summary

Web Design is the skill of creating and displaying information on web pages.

HTML is the main programming language used for web pages.

HTML uses tags to tell the browser what to show and how to show it.

Wordpress is an easy way to create fully functional, easy to maintain web sites.