Saturday, 8 April 2023
Lists in HTML
In this tutorial we are going to look at lists in HTML.
There 3 types of lists in HTML, namely:
1) Ordered lists;
2) Unordered lists;
3) Description lists;
Let’s consider ordered lists first:
1) Ordered Lists:
Take a look at the following section of code:
<ol>
<li>Lion</li>
<li>Leopard</li>
<li>Rhino</li>
<li>Elephant</li>
<li>African Buffalo</li>
</ol>
What the code does:
<ol></ol>
This tag pair defines the start and end of an ordered list. Ordered lists are rendered in a web browser as a numbered list.
<li></li>
This tag pair defines a list item. The <li></li> tags are contained within either unordered lists or ordered lists. In the case of ordered list, you will notice that even though the <li> tags are all identical, in the web browser they appear as numbers starting from 1.
..............................
2) Unordered Lists:
Consider the following code:
<ul>
<li>Coffee>/li>
<li>Tea>/li>
<li>Hot Chocolate>/li>
</ul>
What the code does:
<ul></ul>
This tag pair defines the start and end of an unordered list. Unordered lists are rendered in a web browser as a bulleted list.
<li></li>
This tag pair defines a list item. The <li></li> tags are contained within either unordered lists or ordered lists.
..............................
3) Description Lists:
Consider the following code:
<dl>
<dt>Car:</dt>
<dd>A Vehicle used to transport people with.</dd>
<dt>Desktop Computer:</dt>
<dd>A general computing device.<dd>
</dl>
What the code does:
<dl></dl>
Description List:
The Description list <dl></dl> tags define a description list. The <dl></dl> tags contains the <dt></dt> and <dd></dd> tags.
<dt></dt>
Definition term. This tag pair specifies a definition term. This term defines / describes the definition data. It is the 2nd part of the description list and is used in conjuction with the <dd></dd> tag pair and the preceding <dl></dl> tag pair. The term is first named with <dt></dt> then it is described with <dd></dd> tags.
<dd></dd>
It is the 3rd part of the description list and is used with the <dl></dl> tag pair and the <dt></dt> tag pair. The <dd></dd> tags defines and gives meaning to the term as described by the <dt></dt> tags.
..............................
Putting
it All together:
Create a .txt file on your computer and copy and paste the code below into your text file. You can name it: HTML Lists.html
<!DOCTYPE html>
<html>
<head>
<title>Lists in HTML:</title>
</head>
<body>
<!-- This text is hidden and won’t show in the browser -->
<!-- Ordered Lists are rendered as numbered lists in the web browser. -->
<h3>1) Ordered Lists:</h3>
<h4>South-African Big 5 Animals:</h4>
<ol>
<li>Lion</li>
<li>Leopard</li>
<li>Rhino</li>
<li>Elephant</li>
<li>African Buffalo</li>
</ol>
<!-- Unordered Lists are rendered as bulleted lists in the web browser. -->
<h3>2) Unordered Lists:</h3>
<h4>Hot Drinks:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Hot Chocolate</li>
</ul>
<!-- Description Lists are rendered as the term and a description in the web browser. -->
<h3>3) Description Lists:</h3>
<dl>
<dt>Car:</dt>
<dd>A vehicle used to transport people with.</dd>
<dt>Desktop Computer:</dt>
<dd>A general computing device used to make office tasks easier, play games, make digital art, program / code applications with, etc.</dd>
<dt>Bitcoin:</dt>
<dd>It is the first cryptocurrency ( Digital Currency / Money ). It is designed to work as a medium of exchange and is decentralized. In other words, it has no central governing authority.</dd>
<dt><a href=”https://www.codedesk.co.za”>CodeDesk.co.za: </a></dt>
<!-- This <dt></dt> tags contains a link and the <dd></dd> tags contains some
emojis which we will discuss in a future lesson. -->
<dd>The Best place to learn how to code 💯 </dd>
</dl>
</body>
</html>
Open the html file in your browser to view the code you just created!
The output of the above code:
Figure 1:
The above image shows the output of the 3 types of lists. Ordered lists appear as a numbered list, unordered lists appear as a bulleted list and description lists appear as a term and a description about the term.
That concludes our tutorial on lists in HTML.
I hope everyone has a blessed week 💯
Tuesday, 4 April 2023
Play Games on CodeDesk.co.za
I am very pleased to announce that you guys can now play games directly on CodeDesk.co.za 😁
Check out our Games page to see our games.
Hope you guys enjoy it 😁 💯
Tuesday, 28 March 2023
HTML Introduction
What is HTML?
HTML is an acronym for: Hypertext Markup Language. An HTML document is used is used for displaying text, links, images video on the internet that can be viewed on the user’s web browser. The current Version of HTML standard is version 5. HTML documents use the .html file name extension. HTML documents was first created in 1993 by Sir Tim Berners-Lee, a computer scientist.
An HTML document is sent from the web server computer to the user’s web browser via the HTTP protocol ( Hyper Text Transfer Protocol ). The server-side application used to for this purpose is called Apache web server. Files are sent by means of the FTP ( File Transfer Protocol ) ( HTTP can also handle files it seems 🤔 ). On a user’s local PC, files are sent using the file protocol. Email is sent via SMTP ( Simple Mail Transfer Protocol ).
The source code of an HTML, CSS and Javascript document can be viewed in your web browser by typing: Ctrl + U on your desktop PC, Cmd + U on Mac OS, and on a mobile browser such as smartphone or Tablet one can type: view-source: in front of the website you are viewing. Eg: view-source:www.google.com This command also works on desktop PC as well.
We can Create / edit an HTML document in many different ways:
You can use any text editor to edit an HTML document Eg: Notepad on Windows PC, Microsoft Word, Notepad++, Geany, Vscode, etc. With Notepad one simply save the file with the .txt extention and rename it to .html
A basic HTML document:
Copy this text to a Notepad document, save as .txt and rename to .html Then open it in your web browser:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML document</title>
</head>
<body>
<!-- This text is hidden and won’t show in the browser -->
<h3>Hello, world!</h3>
</body>
</html>
What
does each tag do? 🤓
<!DOCTYPE html>
This is the tag is actually not an HTML tag but defined as a “declaration”. It defines the document is an HTML document. It has only one “tag”. It can also be written as <!Doctype html> etc. as the declaration is not case sensitive.
<html></html>
This tag is encompasses all other tags in the HTML document. It is only the <!DOCTYPE html> tag that is located outside of the html tag.<head></head>
This tag defines various information. Most information in the head tag are not visible to the user. The title tag is one of the few tags in the head tag, that are visible to the user. The head also contains <meta> tags which contain information that are used by search-engines like Google search.<title></title>
This tag contains the title of the specific HTML document. The title of the HTML document is displayed in the tab of the browser. This makes it easy to identify which document you are viewing.
<!-- -->
The comment tag is used by web designers / developers to comment on the code that they write. The comment tags can also be used to temporarily hide specific sections of code when debugging a web application because the developer can narrow down which section of code it is that is not working correctly.
<body></body>
The body tags contain all the visible text, images, video and other media that are linked to the HTML document. The text can be in the form of paragraphs, tables, headings, ordered-and unordered lists, forms, etc.
<h3>Hello, world!</h3>
The <h1> to <h6> denotes a heading in a paragraph. The <h1> tag is the largest heading and <h6> the smallest heading.
Most HTML tags have a start and end-tag. This is the start tag of the head: <head>
This is the end tag: </head> Some tags do not have an end tag. Eg: <br /> This tag means line break and creates a space between paragraphs in the body section of the HTML document.
Have a look at the following screen shots:
Figure 1:
Note that the active tab title text also appears at the top of the browser to show it is the tab that is active. Also, in the address bar, https:// is displayed before the www.codesk.co.za to indicate that this page is delivered to the user using the HTTP protocol. The padlock icon is used to indicate that www.codedesk.co.za is delivered via secure HTTP or HTTPS.
Figure 2:
Since our First HTML document is stored on your local computer, the web browser displays file:/// in front of the document to indicate the document is delivered to the browser via the file protocol. The text “Hello, World!” is also displayed as the <h3> tag is contained in the body tag and therefore, is visible text.
Some more notes on HTML:
The HTML document can also contain other languages’ code that can be embedded into the HTML document. Some examples of other language code that can be embedded into an HTML document are: CSS, Javascript and PHP.It
can be said that HTML is used for the content of a web page, CSS is
used for formatting the content and styling it, Javascript is used to
animate webpages, display adverts, etc. and lastly server-side
scripting languages like PHP is used for creating Login and
registration and other complex functionality to a website. This is
not set in stone but as the languages and their functions sometimes
overlap.
Conclusion:
This concludes the basic HTML lesson. Join me next time as we delve deeper into HTML and explore more tags for content, search-engine information, etc.
Saturday, 25 March 2023
Hello, World!
Hello, World!
Hey guys, my name is Reinhardt.
This is my first post ^_^
I am a beginner / hobbyist web developer. I would like to share my love for coding web apps with everyone. I will be sharing many tips and tricks, sample code, app reviews, tutorials and much more with you.
What topic should one start a programming / coding blog with?
“Hello, World!” of course!
A “Hello, World!” program is a program that one usually learns to write at the very start of your path to becoming a programmer / web developer. Its functionality is to output to the screen the text: “Hello, World!” This serves to way to demonstrate the basic syntax and structure of the language that you are learning.
Below
are listed 10 examples of “Hello, World!” program code in
different programming languages:
1) HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h3>Hello, world!</h3>
</body>
</html>
2) CSS:
h3
{
color: red;
}
3) PHP:
<?php
echo "Hello, world!";
?>
4) MYSQL:
SELECT 'Hello, World!' FROM first_program;
5) Javascript:
console.log("Hello, world!");
6) Python:
print("Hello, world!")
7) Ruby On Rails:
# in the controller
class HelloController < ApplicationController
def index
render plain: "Hello, world!"
end
end
# in the routes file
Rails.application.routes.draw do
get 'hello/index'
root 'hello#index'
end
8) Bash Shell:
#!/bin/bash
echo "Hello, world!"
9) JAVA:
class Main {
public static void main(String[] args) {
System.out.println("Hello, world!");
}
}
10) C#
using System;
class Program {
static void Main(string[] args) {
Console.WriteLine("Hello, world!");
}
}
This is just a small sample.
There are 100's of computer programming languages in existence, each with their own use case, pros and cons, etc.
Hope you guys liked this sample code.
Happy coding and stay safe :-)
Subscribe to:
Comments (Atom)