The foundation of these notes is taken from Barry Luijbregts' PluralSight course called HTML, CSS, and Javascript: The Big Picture. The images are screen captures, a few of which have been edited. Some additional information is included from various sources, which are listed at the bottom of each post in the References section.
This post is part of a long-term series called The Web Series. To start from the beginning, check out History of The Web. The Web Series includes everything you need to get started on the path of web development.
Formatting conventions used:
<p> </p> These are HTML style tags.
<br /> This is also HTML.
<< >> These are just to frame the code. If you're using any code, do not copy these. For example, if it said << <a href="https://techkeen.com"> TechnicallyKeen</a> >> than you would only copy the following part:
<a href="https://techkeen.com"> TechnicallyKeen</a>This is only to keep the code snippets within their paragraph.
WHAT IS HTML?
Standard markup for creating websites and web applications
What you see in your browser is rendered by the browser from HTML docs
structure
.htm or .html
various elements specified in standards. All browsers get it
<!DOCTYPE html> not strictly HTML, but tells browser that is reading HTML and which version
if it just says HTML is means HTML5
Every element has an open and a close tag. ?? I thought that HTML5 dropped that for some.
<html> </html> everything within these is HTML
<head> </head> include title for doc, scripts, styles, meta info, and more
<body> </body> contains everything to be displayed on the screen
<html>
<head>
<!--meta information-->
</head>
<body>
<!--body content;-->
</body>
</html>
These are all of the elements that are necessary for an HTML document, all browsers understand these and use them to display them on the screen.
<html>
<head>
/* meta tag with charset attribute of UTF-8 */
<meta charset=”uft-8”>
/* title tag; words in browser tab */
<title> My TITLE </title>
</head>
<body>
<div> /*div tag is like a container or box */
<ul> /*Unordered, so bullet points */
<li> cat </li>
<li> cmat </li>
<li> cmbat </li>
</ul> /*put the lid on the div container */
</div>
</body>
</html>
WHEN RENDERED:
MORE EXPRESSIVE ELEMENTS:
HTML5 elements are more expressive. The following are ELEMENTS, NOT TAGS!
<header> </header> container for introductory content, or a set of navigational links
<nav /> nav tag; defines a set of navigation links
<main> </main> specifies main content of the HTML doc
<article /> article tag; specifies independent, self-contained content
<aside /> aside tag; specifies content aside from (separate from) the content it is placed in
<footer> </footer> contains things like copyright or address of company
These elements are geared toward content displayed on the web page and add more nuance.
There are also adds that allow more interaction with the browser
MORE INTERACTIVE ELEMENTS:
Audio element audio control bar for the webpage, and have browser play audio.
When rendered, << Your browser does not support the audio tag. >> only shows if the browser does, in fact, not support the audio tag. Look it up or just try it out.
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Canvas element provides a place to draw on in order to display custom shapes. HOW DO YOU DO THIS ONE? SOUNDS FUN
<canvas id="myDrawing"></canvas>
Form element basis for most interactive web pages and applications. This can post information from the browser to the server, or vice versa. IE user input text (Username, first name, last name). Within the form, you can also put a button, which is an input element of the type submit. When the user activates it, it sends the information to the damn server.
<form action="/action_page.php" method="post">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="submit"> /*submit button*/
</form>I think <br> is the new version of <br />. Confirm this.
video element plays video in browsers
When rendered, << Your browser does not support the video tag. >> only shows if the browser does, in fact, not support the audio tag. Look it up or just try it out.
<video width="150" height="200" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>There are many more elements. Look them up as you go.
F12
Attributes that tell the source of the video, whether downloading of this video is enabled or disabled, and viewer size.
caniuse.com lookup which elements work with which browsers.
HTML is a markup lang with many elements, tags, and attributes that web browsers understand, but not all web browsers support all elements. Be diligent.
WORKING WITH HTML
Don’t worry about HTTP or the server. Just write the HTML doc and deploy it on the web server.
Save the HTTP and Server stuff for when you’re ready in a couple of years.
Write HTML from scratch by writing the HTML elements, tags, and attributes from earlier. There are many tools you can use to do this (I prefer Atom or GitHub), but in school, we learned from TXT editor (the one before notepad). Or use an IDE (Integrated Development Environment), they have many extra features like suggesting tags, error checking, and highlighting. You’ll love it. Colour coronation is the best. Visual Studio, Eclipse, and my Atom. Online editors exist too (<< htmlivecode.com >> (HTMLive, not HTML live) has code on one side and renders on the other side.) They’re useful for experimenting without all the effort of making a file. Less wasteful of your memory.
HTML frameworks save time too. PHP, ASP.NET
When programming in another language, it is common to have to write a little HTML to go with it. Do this using a framework like PHP or ASP.NET . A framework does not only generate HTML for you but also allows you to do advanced things like communicating with a database. All of the code that you write and all of the code of the framework lives on the web server. Now the client PC’s browser can request a doc via an URL…
The framework will then generate the HTML for the requested document and send it to the browser, who displays it.
Instead of just having a plain HTML doc, a framework provides a layer around it, which generates HTML and provides additional features like the ability to connect to a database.
Example of a framework using ASP.NET MVC
With this framework you create CSHTML files like << details.cshtml >> file. It is a C# (C sharp) HTML file that uses the Razor language to manipulate data. In the CSHTML file, you’d write HTML like this combined with the Razor language to work with data.
Additionally, you have C# files, like this << OrderController.cs>> file. This code runs on the web server and responds to the URL request to serve up the details page. Before it does that, it looks for an order record in the database. Which is performed by the << var order = _orderService.GetOrderByID(id); >> line. And then it returns the view which is the details of the << details.cshtml >> file, which triggers the generation of HTML that is sent to the browser.
A framework like this provides a lot of flexibility and features, but it’s also much more advanced than just HMTL. In order to use it, you need to learn how the framework works, and in this case C# too.
Some other HTML Frameworks:
PHP Famously the language WordPress uses, so now most websites and applications on the Internet are actually written in PHP.
Java Programming language what has several frameworks that generate HTML4.01
ASP.NET MVC Example above
Ruby
Python
Node.js Framework based on JS and Go language, which can be used to build web applications.
These frameworks can be used to write websites and web applications from scratch and can generate HTML for you. Fuck yeah, PY!!
You could also use WordPress, << ghost.org >>, Wix, or the such.
REMEMBER
Resources
Comments