< >
and a closing, or ending tag with contain a slash </ >
. For example, paragraphs of text are surrounding with the <p>
and </p>
tags.<em>
tag like this:
<em>This text will look italic,</em> while this does not.
Will produce: This text will look italic, while this does not.head
(one would hope) and a body
that people can see (and even interact with). This, along with many other elements is called the Document Object Model (DOM).head
and body
are the two major elements inside your basic html
file. These also happen to be the first tags you'll need to write:<html>
and </html>
tags tell the interpreter (browser) that this is in HTML format and to interpret everything between those tags as such.<head>
and </head>
tags define an area for hidden content that the end-user does not typically see. Hidden information could be meta-data (like search tags), loading external files in the background, and giving your page a <title>
.<body>
and </body>
tags is where the real magic happens! This is where you will define the content and structure of your page. 99% of your page content will be between these tags..html
extension (call it something snazzy like helloworld.html). Now open that file in your favourite web browser (typically by double-clicking the file wherever you have it saved). It should look something like this:<title>
tag inside the head tags. This is one of the only tags inside the head that is visible to the user. Did you notice what it did?<b>
for bold) or the shiny, new HTML5 standards (<strong>
). The general rule of thumb is: if it can be done using a style (CSS), then do it with a style. That becomes overly complicated for new learners. Here is a non-exhaustive list of some useful tags to learn, in no particular order:<p>
<div>
<div>
is to provide labeled sections and subsections of the document that can be styled, hidden, etc.<br />
<h1>...<h6>
<font>
<a>
name
attribute, allowing you to link to a section in the current document and a href
attribute which is a reference to another page (the link).
Example: <a href="https://cs.brash.ca">Computer Science</a>
would create a link to my computer science website like this: Computer Science​<img>
src
attribute.<table>
<tr>
and cells of data (columns in a row) with <td>
.<button>
<input>
tag, found on a <form>
. We will use the <button>
tag to help create interactivity on our pages with Javascript!<!--
opening tag and close with -->
.<!-- This next line is commented out
<img src="..\images\sample.jpg">
-->
<button>
tag has a style
associated with it to add padding (space) around the label "Click me!".Enter: Javascript!