Send the link below via email or IMCopy
Present to your audienceStart 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
HTML for Non-Technical Folks
Transcript of HTML for Non-Technical Folks
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>
</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.