{"id":829,"date":"2023-03-08T13:42:43","date_gmt":"2023-03-08T13:42:43","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/?page_id=829"},"modified":"2023-03-08T14:15:47","modified_gmt":"2023-03-08T14:15:47","slug":"html-text","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/authoring-a-website\/week-1\/html-text\/","title":{"rendered":"HTML text"},"content":{"rendered":"\n

The <a> tag defines a hyperlink, which is used to link from one page to another. It isn’t just used for text, you can put an anchor around anything, but I’m introducing it here so we can use it in the menu.<\/p>\n\n\n\n

The most important attribute of the <a> element is the href attribute, which indicates the link\u2019s destination.<\/p>\n\n\n\n

By default, links will appear in different colours depending on if the page has been visited or is active.<\/p>\n\n\n\n

If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.<\/p>\n\n\n\n

A linked page is normally displayed in the current browser window, unless you specify another target.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <link rel=\"stylesheet\" href=\"\/style.css\">\n    <script type=\"text\/javascript\" src=\"\/script.js\"><\/script>\n    <meta charset=\"UTF-8\">\n    <meta author=\"Your name here\">\n    <title>My first webpage<\/title>\n  <\/head>\n  <body>\n    <header>\n      This is my website name\n    <\/header>\n    <nav>\n      <a href=\"\/index.html\">Home<\/a>\n    <\/nav>\n    <main>\n      This is the main part of the page.\n    <\/main>\n    <footer>\n      This is the footer.\n    <\/footer>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n
The <h1> to <h6> tags are used to define HTML headings.<\/p>\n\n\n\n
<h1> defines the most important heading. <h6> defines the least important heading.<\/p>\n\n\n\n
Note: Only use one <h1> per page \u2013 this should represent the main heading\/subject for the whole page. Also, do not skip heading levels \u2013 start with <h1>, then use <h2>, and so on.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <link rel=\"stylesheet\" href=\"\/style.css\">\n    <script type=\"text\/javascript\" src=\"\/script.js\"><\/script>\n    <meta charset=\"UTF-8\">\n    <meta author=\"Your name here\">\n    <title>My first webpage<\/title>\n  <\/head>\n  <body>\n    <header>\n      This is my website name\n    <\/header>\n    <nav>\n      <a href=\"\/index.html\">Home<\/a>\n    <\/nav>\n    <main>\n      <h1>Welcome to my home page<\/h1>\n    <\/main>\n    <footer>\n      This is the footer.\n    <\/footer>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n
The <p> tag defines a paragraph.<\/p>\n\n\n\n
Because <p> tags are block elements, browsers automatically add a single blank line before and after each <p> element.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <link rel=\"stylesheet\" href=\"\/style.css\">\n    <script type=\"text\/javascript\" src=\"\/script.js\"><\/script>\n    <meta charset=\"UTF-8\">\n    <meta author=\"Your name here\">\n    <title>My first webpage<\/title>\n  <\/head>\n  <body>\n    <header>\n      This is my website name\n    <\/header>\n    <nav>\n      <a href=\"\/index.html\">Home<\/a>\n    <\/nav>\n    <main>\n      <h1>Welcome to my home page<\/h1>\n      <p>This is the main part of the page.<\/p>\n    <\/main>\n    <footer>\n      This is the footer.\n    <\/footer>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n
The <br> tag inserts a single line break.<\/p>\n\n\n\n
The <br> tag is useful for writing addresses or poems.<\/p>\n\n\n\n
The <br> tag is an empty tag which means that it has no end tag.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <link rel=\"stylesheet\" href=\"\/style.css\">\n    <script type=\"text\/javascript\" src=\"\/script.js\"><\/script>\n    <meta charset=\"UTF-8\">\n    <meta author=\"Your name here\">\n    <title>My first webpage<\/title>\n  <\/head>\n  <body>\n    <header>\n      This is my website name\n    <\/header>\n    <nav>\n      <a href=\"\/index.html\">Home<\/a>\n    <\/nav>\n    <main>\n      <h1>Welcome to my home page<\/h1>\n      <p>This is the main part of the page.<\/p>\n      <h2>To do list<\/h2>\n      <p>\n        Learn HTML<br>\n        Learn CSS<br>\n        Learn Javascript<br>\n        Make a website\n      <\/p>\n    <\/main>\n    <footer>\n      This is the footer.\n    <\/footer>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\"Example
Example output after adding h1, a, p and br tags<\/figcaption><\/figure><\/div>\n\n\n\n
\n\n\n\n
Hang on, that’s a list. There are better ways to do a list than using line breaks. We can use the <ul>, <ol>, and <li> tags.<\/p>\n\n\n\n
They can contain more than simply text. Very useful when grouping similar content such as in a menu or gallery.<\/p>\n\n\n\n
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.<\/p>\n\n\n\n
  1. This<\/li>
  2. is<\/li>
  3. an<\/li>
  4. ordered<\/li>
  5. list<\/li><\/ol>\n\n\n\n
    The <ul> tag defines an unordered (bulleted) list.<\/p>\n\n\n\n