What is hypertext markup language (HTML)?
Understanding HTML.
Simply put HTML is what made the internet! (at the beginning anyway). It is the language computers use to display content on web browsers. I could spend ages explaining details but it’s much better if I just demonstrate it. So before I go any further let me show you with an example (I’m afraid this will only work with PC users). I borrowed this excellent code from Quackit.com but it explains the point nicely in a way that any user can quickly access and once you have done it (if you are a coding virgin) in the space of 10 seconds you will have pasted and enacted your own code using only the simplest commands and tools.
- Open notepad on your computer (even if you are at work this should work well.)
- Copy and paste the below into notepad.
- Finally, save the file anywhere as form.html and open it in your broswer (internet explorer, firefox, chrome etc) of choice:
Taken from: http://www.quackit.com/html/html_editors/scratchpad/?example=/html/examples/form_labels_aligned_top
Copy from below here:
- <!DOCTYPE html>
<title>My Example</title> - <style>
.myForm {
font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
font-size: 0.8em;
width: 20em;
padding: 1em;
border: 1px solid #ccc;
} - .myForm * {
box-sizing: border-box;
} - .myForm fieldset {
border: none;
padding: 0;
} - .myForm legend,
.myForm label {
padding: 0;
font-weight: bold;
} - .myForm label.choice {
font-size: 0.9em;
font-weight: normal;
} - .myForm input[type=”text”],
.myForm input[type=”tel”],
.myForm input[type=”email”],
.myForm input[type=”datetime-local”],
.myForm select,
.myForm textarea {
display: block;
width: 100%;
border: 1px solid #ccc;
font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
font-size: 0.9em;
padding: 0.3em;
} - .myForm textarea {
height: 100px;
} - .myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-top: 1em;
} - .myForm button:hover {
background: #ccc;
cursor: pointer;
}
</style>
<form class=”myForm” method=”get” action=”/html/codes/html_form_handler.cfm”>
<p>
<label>Name
<input type=”text” name=”customer_name” required>
</label>
</p> - <p>
<label>Phone
<input type=”tel” name=”phone_number”>
</label>
</p> - <p>
<label>Email
<input type=”email” name=”email_address”>
</label>
</p> - <fieldset>
<legend>Which taxi do you require?</legend>
<p><label> <input type=”radio” name=”taxi” required value=”car”> Car </label></p>
<p><label> <input type=”radio” name=”taxi” required value=”van”> Van </label></p>
<p><label> <input type=”radio” name=”taxi” required value=”tuktuk”> Tuk Tuk </label></p>
</fieldset> - <fieldset>
<legend>Extras</legend>
<p><label> <input type=”checkbox” name=”extras” value=”baby”> Baby Seat </label></p>
<p><label> <input type=”checkbox” name=”extras” value=”wheelchair”> Wheelchair Access </label></p>
<p><label> <input type=”checkbox” name=”extras” value=”tip”> Stock Tip </label></p>
</fieldset> - <p>
<label>Pickup Date/Time
<input type=”datetime-local” name=”pickup_time” required>
</label>
</p> - <p>
<label>Pickup Place
<select id=”pickup_place” name=”pickup_place”>
<option value=”” selected=”selected”>Select One</option>
<option value=”office” >Taxi Office</option>
<option value=”town_hall” >Town Hall</option>
<option value=”telepathy” >We’ll Guess!</option>
</select>
</label>
</p> - <p>
<label>Dropoff Place
<input type=”text” name=”dropoff_place” required list=”destinations”>
</label> - <datalist id=”destinations”>
<option value=”Airport”>
<option value=”Beach”>
<option value=”Fred Flinstone’s House”>
</datalist>
</p> - <p>
<label>Special Instructions
<textarea name=”comments” maxlength=”500"></textarea>
</label>
</p> - <p><button>Submit Booking</button></p>
- </form>
- <hr>
<p>More info: <a href=”/html/tags/html_form_tag.cfm”><code>form</code></a>, <a href=”/html/tutorial/html_forms.cfm”>HTML Form Tutorial</a>, <a href=”/html/codes/html_form_code.cfm”>HTML Form Code</a>, <a href=”/html/codes/html_form_to_email.cfm”>Form to Email</a>.</p>
To above here:
This is just a small example to get you started. What you can see is that HTML adds CONTENT to a browser that’s all it does. This is why it is not actually a programming language but rather a ‘markup language’.
I basically consists of lots of tags in a ‘sandwich’ that tell the browser what to display. In order to make it look nice another language called CSS or cascading style sheets is required. I’ll go more into this on another post.
If you want to learn HTML/CSS I suggest you go to codeacademy and start doing their HTML online course — it’s free! This is a great place to start. Even though they are not actually programming languages they will get you to start understanding easy to read code.
Originally published at Clinical Developers Network.
