A Short Guide to Working with HTML for Beginners
Website developers use computer languages like HTML, CSS, and JavaScript to create websites and other online applications on the internet.
HTML (HyperText Markup Language) is a markup language that describes the structure of a webpage to the browser. Simply put, a markup language is a computer language that formats a document’s overall appearance and the data it contains by using special keywords, names, and tags.
Imagine HTML to be the skeletal structure of our body.
HTML Editors
To learn HTML, all you need is a simple text editor.
If you’re a PC user, simply open Notepad. For Mac users, open TextEdit then under Preferences > Format, select “Plain Text” to ensure that the files save properly. Then, under “Open and Save,” select the option that states “Display HTML files as HTML code instead of formatted text.”
Now, you’re ready to start following along!
HTML Elements
An HTML element is a component of an HTML document that is defined by a start tag, some content, and then an end tag. The only difference between both tags is the forward slash after the opening bracket of an end tag.
<tagName> Your Content Will Go Here </tagName>Declaring the Doctype of an HTML Document
Since HTML is an evolving language that is frequently being updated, all documents must start with a declaration of the version your page is using.
Keep in mind that the declaration isn’t a tag, but rather information to let the browser know what kind of document it’s expecting.
For HTML5 (the most recent version), the declaration is as follows:
<!DOCTYPE html>After that, you’ll need to wrap the rest of your code in HTML tags. The beginning tag will appear immediately after the code defining your version, and the closing tag will appear at the bottom of your page.
<!DOCTYPE html>
<html></html>
Defining the Head and Body of an HTML Document
Within our HTML tags, we can add another level of organization to our document by using the head and body elements.
All information about an HTML document that is not shown is referred to as metadata and is stored in the head element. Examples include the document title, character set, styles, and scripts. Any information regarding the content of the page that is shown to users would go into the body element.
<!DOCTYPE html>
<html>
<head>
<title> Beginning with Basic HTML </title>
</head>
<body>
...
</body>
</html>Headlining an HTML Documents
HTML headings are titles and subtitles you’d like to display on your webpage. Headings are defined with the h1 through h6 elements, where h1 is the main heading, followed by h2 which indicates subheadings, and so on.
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
Paragraph Element
A paragraph, a block of text, can be created on HTML with the p element.
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Commenting
If collaborating with other developers, leaving comments is a way to explain how your program works and the intention behind it. Commenting is also a way to make your code inactive without having to delete it all.
Keep in mind that a comment is a note, not code that will be displayed.
<!-- ... -->Adding Images to Your Webpage
If you’d like to add an image to your webpage, you can do so with the img element. The img tag contains two attributes and no end tag.
The element will point to the specific image’s URL through the src attribute. An alt attribute is an alternate text to describe the image for the sake of improving accessibility and if the image fails to load.
<img src = "https://www.uh.edu/engines/The-iconic-moon-image-from-A-Trip-to-the-Moon.jpg" alt = "the moon's eye">
Unordered and Ordered Lists
in HTML, there are special elements to create unordered and ordered lists.
Unordered lists, or bullet points, can be created with an ul element followed by a series of li elements that are used to list off content.
<ul>
<li> Green </li>
<li> Blue </li>
<li> Red </li>
</ul>
Ordered lists, or numbered lists, can be created with an ol element followed by a series of li elements that are used to list off content.
<ol>
<li> Number 1 </li>
<li> Number 2 </li>
<li> Number 3 </li>
</ol>
Creating a Form
You are able to build web forms that submit user data to a server. To do this, simply specify the URL of where you want to submit the form data in the action attribute on your form element.
<form action = "https://en.wikipedia.org/wiki/Wikipedia:Dead-end_pages"> </form>Radio buttons can be used to ask a question that requires users to choose one answer from multiple options. Radio buttons are an input type that is frequently nested within a label element.
To build a group, every radio button should have the same name attribute. This ensures that when a user selects one option, all other options in the same group will automatically be deselected.
<label>
<input type = "radio" name = "female-male" value = "Female">Female
</label><label>
<input type = "radio" name = "female-male" value = "Male">Male
</label>
Checkboxes can be used to ask a question in which the user may select more than one answer. Checkboxes are also an input type, often nested within a label element. Similar to radio buttons, every related checkbox input should have the same name attribute.
<label>
<input type = "checkbox" name = "day" value = "Mon"> Monday
</label><label>
<input type = "checkbox" name = "day" value = "Tue"> Tuesday
</label>
To submit the form, add a button with a type attribute set to submit. This will send the data from the form to the URL you specified previously.
<form action = "https://en.wikipedia.org/wiki/Wikipedia:Dead-end_pages"> <button type = "submit"> Submit </button></form>
