It is possible to create tables using HTML. The use of this could be to display a timetable on your website. To create a table, you will use the <table> tag. Every table contains Table Rows which can be created using the <tr> tag.
You will include Table Headings within the <tr> tag, denoted by the <th> tag. Using our example, a table header would be used for the days of the week. e.g. Monday, Tuesday, etc.
Following this, you would use the <td> tag. This tag is used for Table Data. An example of this would be the listing on your timetable. e.g. Room 1 - HTML Lab.
As well as using all these tags, you can include a Caption using the <caption> tag.
Although styling is done using CSS in an external style sheet, it is possible to add style rules within your HTML page directly. This is done by using the tag <style> and inputting your style rules within it. You will then call on whatever elements you wish to style, in my case, the table, th, and td elements. You will then state what you wish to style, an example of this would be the border. Once you have decided this, you will state how you would like to style it. All of this will be contained within Curly Brackets {}. Example:
<style>
table{
border: 1px solid black;
}
</style>
See the example below for using all of these tags I just mentioned.
On the image on the left you can see all the tags I talked about above. Note that I have the same number of <th> and <td> in each of the column. My style rules were declared above, within the <head> tag.
On the image on the right you can see that the <th> tag will display your text in bold, and the <td> tag will display normal text. You can also see the style rules created a border around the table, with the caption being outside the border.
Friday, 28 October 2016
Monday, 24 October 2016
HTML Attributes & Basic Styling
Today I will go through HTML Attributes and basic HTML Styling. HTML elements contain attributes, these provide additional information. They are always declared at the start of an opening tag. Each attribute has a Type and a Value.
Some of these attributes include:
In the right image you can see the code using attribute tags.
To the left you can see the result of these attribute tags outputted to the website.
Aswel as attribute tags, there is some very basic styling you can do using just HTML. These tags include:
Some of these attributes include:
- lang
- title
- href
- src
- width
- height
- alt
In the right image you can see the code using attribute tags.
To the left you can see the result of these attribute tags outputted to the website.
Aswel as attribute tags, there is some very basic styling you can do using just HTML. These tags include:
- <b>
- <i>
- <u>
Thursday, 20 October 2016
HTML Basics
HTML (HyperText Markup Language), CSS (Cascade Styling Sheet), JS (JavaScript) are the very basic programming languages used to create and build websites. On this blog I will help and aid you to use the tools needed to build a basic website. The easiest way to write code for HTML, CSS or JS is to have a text editor. The text editor you use should be able to edit your code and run it through a browser such as FireFox or Google Chrome. The text editor I would suggest is Notepad++. Please find the link below if you wish to download this editor.
We will first take a look at HTML. HTML uses building blocks known as 'Elements' to create a webpage or certain applications. The most basic element tags would be:
The HTML document itself is contained between the <html> tag, followed by the <body> tag.
Within these tags is where you find the main bulk of your website, which include tags such as your <p> and <h1> to <h6> tags.
Every tag has an opening and a closing tag. This is denoted by a '/' in front of every closing tag. Within the opening and closing tags is where you will type what you want to be outputted on your website.
See the screenshot below for an example.
We will first take a look at HTML. HTML uses building blocks known as 'Elements' to create a webpage or certain applications. The most basic element tags would be:
- <body>
- <html>
- <h1> ... <h6>
- <p>
The HTML document itself is contained between the <html> tag, followed by the <body> tag.
Within these tags is where you find the main bulk of your website, which include tags such as your <p> and <h1> to <h6> tags.
Every tag has an opening and a closing tag. This is denoted by a '/' in front of every closing tag. Within the opening and closing tags is where you will type what you want to be outputted on your website.
See the screenshot below for an example.
Download link for Notepad++:
Subscribe to:
Posts (Atom)