Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


HTML for Non-Technical Folks

No description

Metsy Corter

on 27 November 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML for Non-Technical Folks

Intro to the Internet Create an HTML File Populate Your HTML File Web Basics for Non-Technical Folks Help! I've been told to build a web page! (in 8 clicks) (in 15 clicks) Computers all over the world are connected to share data. These groups of computers are called networks, and they come in many sizes and configurations. An intranet is different from the Internet in one main way... an intranet is a network of computers designed to be a private space - not open to the public. Businesses have intranets for their employees. All of the open, public networks - added together - are what we call the Internet. Intranet An extranet is a portion of an organization's intranet that is made accessible to authorized outside users without full access to an entire organization's intranet. Extranet What is the Web? The Web is just one way to access files on the Internet. Web browsers are the tools used to view websites on the Internet. "The World Wide Web (abbreviated as WWW or W3, commonly known as the Web), is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks." -- Wikipedia Huh? When your web browser displays a website, the browser is accessing files on a computer that is located in a network. Those computers - called servers - store website files and serve them to your computer via a web browser. DRAFT - CONTENT IN PROGRESS Whether you are creating a website for the Internet, an intranet or an extranet, you will be creating files and saving the files to computers on a network.

Many people use the term Internet as a generic term, so we will use it for this training.

People will use web browsers to view your website files.

Websites rely on the use of HTML (Hypertext Markup Language) to display images, text, videos, etc. in a web browser.

Next, we'll look at HTML and create our first HTML file. There are many programming languages and technologies available for creating websites,
but all of them rely on HTML to display text, images, links, videos, etc. in a web browser.

A web browser does not display the HTML tags but uses the tags to interpret and display the content of the webpage. Why do I need to learn HTML? HTML files are text files saved with a .html extension.

While there are many code editors you can use to write HTML (such as Adobe Dreamweaver), they can be very complex for a beginner. We will stick with the basics and create our first HTML file using a text editor. Create Your First HTML File Open Notepad
(or TextEdit on a Mac) Click Save As to save the empty txt file. It will try to save it as .txt, so you have to specify the filename... myfirstwebpage.html

I suggest saving webpages in one folder structure on your hard-drive. I save all of my webpages in a folder structure called "My Web Sites". 1 2 3 Now that you've created a blank webpage file, we'll look at some HTML code -- called HTML tags -- you can add to your new page.

HTML tags surround content and apply meaning to it. Tags tell the web browser where and how to display content.

First, HTML tags begin with
a "<" and end with a ">".
We'll call these "gators". > All HTML tags begin with an open gator and an end gator. <html> HTML tags must be closed with a closing tag. A closing tag contains a "/" to let the browser know this is a closing tag.
Opening tags and closing tags are usually a part of a pair. </html>
Type the <html> beginning tag... Type the </html> the closing tag. Note: There are a few situations where the beginning tag is also the closing tag. This happens when there is no content to surround. Don't fret... this will make more sense later. line breaks: <br />
horizontal rule lines: <hr />
images: <img /> <html>

</html> So now that we know what a tag looks like, let's look at the main sections of an HTML file.

You should include all of these sections for your HTML files.

As you can see, each section of the HTML file is surrounded by a set of tags. <head>

</head> <body>

</body> html tells the browser knows where to start and stop interpreting code. Can only be used once in a page. head tells the browser information about the page. Can only be used once in a page. The title You must use the title element within the head element and meta, style, script, base and link can also be used. body contains the content of your page -- what will be displayed on the page. Can only be used once in a page. Now, save this file and you have your first HTML file. However if you viewed this file in a browser, it would be blank.

So now we need to look at the most common HTML tags you will use to add content to your page (inside the body tag). Paragraph Now that we've looked at the most basic structure of an HTML document, let's spend some time learning about the most common tags you will use for your body content.

Note: We are looking at the most common tags. There are more tags available, and many tags have attributes that we have not covered today. We are are looking at the basics. To add a sentence to a webpage, you use a paragraph tag. Looks like this... Headings Looks like this... In Microsoft Word, it is common practice to use different size headings to separate sections of page content. This helps the reader navigate content more easily.

In HTML, you use headings the same way. Bulleted Lists
Numbered Lists Looks like this... When you want to display lists of items on your
webpage, use bullets or numbered lists.

Bullets are called unordered lists -- the ul tags.
Numbered lists are called ordered lists -- the ol tags.

Within each list, you will want to have a bullet/number for each piece of content. These are called line items -- the li tags.
Full transcript