Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

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.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML Basics

A brief overview of HTML and a few exercises for beginners. This also includes instructions on how to utilize the 'Edit HTML' capability in MaxHire for job portal postings. Edit: Added in Optional Notepad++ Setup. Expanded Tutorial Instructions.
by

Nicole Gawron

on 15 August 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML Basics

Using the MaxHire Job Postings template is very simple.

All of the HTML has been entered in and all you need to do is put content in between the tags.

For the most part you will be adding content between <li></li> tags

MaxHire Template
In line 9 type <h1>This is my stylish webpage</h1>
Now we will practice with more tags that are common for completing the job postings


This example will go over line breaks (spacing), bolding text, and lists (bullets)


We will also go over the style information that exists in the body of the document

More Practice
Hello World! Instructions
Open up the program, it should give you a blank page.

It may give you a changelog. If so just click on the red X in the tab that says changelog and it will give you a blank page.

Go to Language tab > H > HTML

Go to File > Save As and select the Desktop. Name your file “My First Webpage” and save as an HTML file

Be sure you are saving your file as an HTML file, sometimes setting the language won’t automatically select HTML as the file type

Configuring Notepad++
Notepad++

Hello World!

More Practice

Overview of Topics
HTML stands for Hyper Text Markup Language
What is HTML?
Posting with MaxHire
Between the first pair of list (<li></li>) tags, type “Style information” and between the second set type “An unordered list”

In line 7 type <p align=“left”>
In Notepad++ open a new document using the “New” icon
Hit the save icon to save the document

Go to the Run tab at the top and select Launch in IE (or the browser of your choice).

Congratulations! You’ve completed your very first webpage!

Hello World! Execution
Using Notepad++ we will walk through writing the classic Hello World! example, which is typically used as a beginner’s first exercise when learning a programming language.

This simple exercise will be done in 9 lines of code.

Hello World!
From Hello World! to MaxHire job postings
Writing in HTML
HTML Page Structure
Web browsers (like Internet Explorer, Mozilla, Chrome, or Safari) translate HTML documents and display them as web pages.


HTML tags are not displayed on webpages, browsers only display the content between the tags.


Browsers use the tags to determine how the content of the HTML page is to be presented/displayed to the user.


In a sense, HTML is a set of formatting and style instructions for a web browser so that it knows how to display the content the way the designer wants it to be viewed.

Web Browsers
HTML elements are made up of HTML Tags and Content.
HTML Elements
Markup tags are referred to as HTML tags

HTML tags are keywords (tag names) surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

The end tag is written like the start tag, with a forward slash before the tag name

Start and end tags are also called opening tags and closing tags
HTML Tags
What is HTML?

HTML Tags

HTML Elements

Web Browsers

HTML Page Structure
Quick Introduction
An Introduction to Writing in HTML
HTML Basics
http://notepad-plus-plus.org/

Notepad++ is a free source code editor which supports several programming languages running under the MS Windows environment

Notepad++ is what I use to write up the HTML for the MaxHire job postings

In other words, an HTML element is the content, which is everything between the start tag and the end tag, and the tags the content is between.
The result
Hyper Text is text displayed on a computer display or other electronic device
A Markup Language is a set of markup tags, the tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
Congratulations! Now you know HTML...
Notice how only the content is visible?
title is shown in the tab
body text shows up in the document
Highlight and delete everything in the Edit HTML box
Copy everything from the HTML doc
and paste into the Edit HTML box
Next click the Edit HTML button
The Edit Job Description area should look something like this
Then hit Apply again
to close the box
To post hit Submit
in 12 steps
I usually save the HTML doc and run it to get a preview of what it will look like when I paste it in Maxhire. I can quickly catch and fix mistakes in Notepad++ so I am not wasting time in MaxHire.
Always double check for errors before hitting Submit.
content sources:
w3schools.com
Wikipedia (HTML Entry)
Other Configuration Options
word wrap the text
so it does this:
rather than expand the page like this:
scroll bar
not fun :(
show indent guide
(usuful for lists)
Auto-check Document
(spell checks the text)
In line 1 type <!DOCTYPE html>
In line 2 type <html>
Add 8 more lines (by hitting enter) and in line 9 type </html>
In line 3 hit tab and type <head>
Hitting tab visually helps you as you write to distinguish different areas.
In line 5 hit tab and type the end tag </head>.
It is always a good habit to write the start and end tags at the same time, so you don’t forget to end a tag.
In line 4 hit tab twice and write <title></title>
Between the title tags write My First Webpage!
In line 6 hit tab once and write <body> and in line 8 repeat for the end tag </body>
In line 7 hit tab twice and write <p></p> and in-between the tags write “Hello World!”
Save
Hello World! Tags Explained
Now that you've completed Hello World!
Some of you might be wondering...
Cool!
But what
does all that jibberish mean?
<!DOCTYPE html>
<!DOCTYPE html> is a Document Type Declaration, this one is for HTML5. The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Without it the browser will not know what version of HTML to follow and will revert to a basic rendering.
<html> </html>
The text between <html> and </html> describes the web page.

This should be the second thing to include underneath the Declaration and closed after all of the content.
<head> </head>
The <head> and </head> tags define information about the website and can include the title, scripts, meta information, etc.
<title> </title>
The HTML element

<title>My First Webpage!</title>

defines the browser page title
(what you see labeled on a
browser window/tab).

Titles always go in the head area.
title is shown in the tab
see how the head tags encompass the title?
<body> </body>
The text between the body tags <body> and </body> is the visible page content.



The head tags always go
before the body tags
(think of it like this:
your head is above your body).
body information is shown in the web page document body
<p> </p>
The <p> and </p> tags are Paragraph tags and define the content to be displayed with Normal Paragraph Formatting (like selecting “Normal” in the Resume Template Styles).

Times New Roman size 12 is the automatic default for Normal Formatting if left undefined. We will go over how to define styles next.
see how this is in Times New Roman size 12?
<p></p> tags always
go inside the body
<p></p>
<body>
</body>
that will open this window
Breaks, Bolding, and Lists
In line 10 type <br><br>
In line 11 type <b>This webpage contains:</b>
In line 12 type <ul> and in line 15 type </ul>

In line 13 hit tab and type <li></li> and repeat in line 14
Not closing the <ul> tag will cause the list to continue within the last bullet.
In line 8 type:
<span style=“font-family:’Franklin Gothic Book’,’sans-serif’” size=“3”>
The <span> tag defines the style and size of what Normal text should be. In this case it is telling the browser to display Franklin Gothic Book (or an alternative san-serif font if Franklin Gothic Book can’t be found) sized at 3 (or what 12 is in Word).

Font size is determined by a number range of 1 through 7. The default, font size 3, is approximately the equivalent of what size 12 is in Word. For job postings we use size 2 which is approximately the equivalent of 10 in Word.
Above the </body> tag (in line 19) close the tags we typed above:
</span></p>
In the first line put the declaration <!DOCTYPE html>
In the second line type <html> and give yourself generous spacing -let’s say about 20 lines- and close the tag with </html>

In line 3 put in the <head> tag and close it in line 5
In line 6 type <body>and close it with </body> in the line above </html> (should be around line 19)
In line 4 hit tab and type <title>Style</title>
<ul> is an Unordered List, meaning it is not numbered and uses bullets instead. <ol> is for an Ordered List which uses numbers because it has an order.
<li></li> are List Item tags. This tells the browser that the text in between will belong to its own bullet.
Not using <ul> will make everything not bulleted even if you use the <li> tags.
In line 16 type <br><br> and in line 17 type
“This webpage <b>does not</b> feature an ordered list."
An ordered list can easily be added by swapping out ul with ol in the HTML tags.
Delete all of the empty lines between
line 17 and the </span></p> tags.
Save the webpage and Run it in a browser.
Save this HTML document as "Stylish Webpage".
The <p align=“left”> tells the browser to Left-justify all of the paragraph text. Having the paragraph tag encompass the whole document also defines everything in between as Normal text.
<h1></h1> are Header 1 tags.
Headers are style information that makes a font larger and bolded to stand out as a section title. There are 6 levels of headers. 1 is the largest and 6 is the smallest
<br> is a line break/space. Two gives the appearance of double spacing (because it is literally two spaces). <br> is an empty tag and does not need to be closed.
<br> is also an empty tag.
Meaning it does not need to be closed.
<b></b> are the bold tags
these are bulleted
this is not bulleted
Not including both the <li> and </li> tag will cause the item to not be recognized as a bullet
Common List Mistakes
1
2
3
5
6
7
8
9
10
11
12
and you can use it for job postings in MaxHire!
Open the job in Maxhire, go to the Advertise and Source tab, and right click hit on the Portal, choose "Edit Posting Details" to get this window.
then click edit description
That will open the Edit Description Window
Then in Notepad++ open the
Blank Job Posting Template
start filling in the information on the template
start copying and pasting bulleted points between the <li></li> tags
4
continue copy/pasting until all the points are included.
add more <li></li> tags as you go if need be.
Move items marked "preferred" to the Preferred Skills section
Hit Apply in the HTML box to close it.
For example, this title needs to be fixed so it will be posted correctly.
and you're done!
Full transcript