HTML (Hypertext Mark-up Language) is a programming language unlike your usual C or Java as this is designed purely for websites and graphical programming compared to Java which is used more for logic programming (aka doing automatic maths). This means you don’t have to set up a graphical window as that is already done for you, all you must do is program what goes on this page.
For every action there is an equal and opposite reaction, the third of Newtons laws is everywhere in physics and the same in programming, for every tag opened it must also be closed at the end, this is done by simply adding a forward slash in the opening tag like this:
Opening tag <body>
Closing tag </body>
In HTML your code is always tags within tags which gives you the relationship of what sections of the website go where, when a tag is within another aka how a <p> may be within <body> the p is said to be the child of the body class and therefore the body is the parent. It’s always useful to understand the language used by programmers otherwise when you look up new things to learn the language will confuse you and will make your job as a programmer massively harder
In HTML, it is always advised to use what is called responsive web design, this means that when different machines load up the same website it should be just as easy to use. This is done by making sections of the webpage percentage based meaning so that for any monitor an image or section will always be 50% and not a set number of pixels. Some older websites haven’t used responsive web design due to when they were made there wasn’t really any need to but now if you loaded one of these websites up on a modern-day computer everything would be odd sizes and likely mixed up. So, make a note! Responsive web design = Good practice.
HTML has standards that are followed so that code is readable all around the world, it is a very good idea to familiarise yourself with these W3C standards at https://www.w3.org/ . This website is also rather good as they have an automatic validation service where you can upload your HTML and see if it does pass these regulations.
| Name | HTML | Description |
|---|---|---|
| Header | |
This is used for text for headings where the number sets the size of font |
| Language set | |
This is always the first line of code as this tells the browser what language to read the document in |
| HTML tag | |
Anything that is within this area is read as HTML and almost everything should be inside of this |
| Paragraph | <p> |
This is the tag used for blocks of text on a webpage |
| Head | <head> |
The head sets the metadata for the page (Data not on the page) and must be inside the html tag |
| Title | <title> |
This sets the name of the webpage which is shown as the tab title not actually on the page. This must be in the head tag |
| Body | <body> |
Any code inside the body tag will be displayed on the webpage itself and therefor almost everything should be in here. The body tag must be inside the HTML tag |
| Break | <br> |
This will break any text block onto another line, remember this must be opened and closed (best to use a self-closing tag) |
| Self-closing tag | <br /> |
This can be used for almost any tag with varying usefulness, it simply opens and closes instantly meaning it’s good for things like breaks to half the size of code needed. |
| Comment | <S!--Text --> |
Comments are lines of code that don’t serve a machine purpose but are instead to make the code more easily understood |
| Divide | <div> |
This is primarily used to divide sections of HTML into groups such as a title and block of text would be grouped together. This tag does not effect anything at all unless it has a class/id |
| Span | <span> |
This is the exact same as a div as It does nothing except group sections of code together, this is generally used for small sections of code. |
| Text stylings | <em><strong> |
These tags when applied in a block of text make the text within italic and or bold depending on which are used |
| Unordered List | <ul><li> |
To create bullet points the list is initiated with <ul> and for each item inside opened and closed with <li> |
| Ordered list | <ol><li> |
To created a numbered list the <ol> tag is used and once again <li> for each list item inside |
| Images | <img src=”location” alt=”description”/> |
This image tag is another use of a self-closing tag seen by the slash at the end, this line of code will load an image given by the src attribute which can be a file link or website link. The alt attribute gives the image a description when hovered over and is useful for the visually impaired to hear an image description |
| Videos | <video src=”location” alt=”description”/> |
This works exactly as the image command works except you can see this time the img is replaced with video to specify how it is used |
| Anchor elements | <a href=”link”> |
An anchor element is used to add a hyperlink to a piece of text diverting to another page or a download, this is specified by the href(hyperlink reference) attribute. You can make this open in a new tab by adding “target=”_blank”” in the anchor element tag. These links can even be used for the same page by linking href to an id of an item on the page like so: href=”#top” if a id of top is used like <div id=””top> |
| Navigation | <nav> |
This is the defined area for a navigation bar code to be made (called a semantic tag as it describes what is inside unlike <div> etc) |
| Table | <table><thead> <tbody> <tr> <td colspan=”number”> <th scope=”col”/”row”> <tfoot> |
To initiate a table <table> is used for each row <tr> and then for each data item <td> with the text inside, if an item should spread multiple collumns you can set the column span for each data entry by changing the colspan entry(this doesn’t need to be set to 1) this can also be done as rowspan to have common rows. With this you have a basic table. You could enter titles as data but it is more accepted to use <th> standing for table headings, you can choose the scope to be column or row setting which it is a heading for.You should generally define your data in the table in a <tbody> and the heading in a <thead> and footer in <tfoot>Borders are very common in tables and it is more accepted generally to use css which is done by: table, td{Which creates a 1pixel black border for the table and each entry. |