HTML
Saturday, July 19, 2025 1:18 PM
Useful websites are created using a combo of HTML, Java Script (js) and Cascading Stylesheets (css).
Connecting js to html: Typing "script:src" in body section gives us "<script src=""></script>", in which we type our javascript file name. For eg:
"<script src="style.js"></script>"
Connecting css to html: Typing "link:css" in head section gives us "<link rel="stylesheet" href="style.css">", in which we type our css file
name. For eg: "link rel="stylesheet" href="hi.css">". By default the name of css file is given as "style.css" in the "link:css" shortcut.
Shortcuts: (1)! <- By typing '!' and pressing enter, we get the boiler plate code.
(2) Alt+ shift+ (down arrow button) <- to copy a line below it.
(3) Alt <- (select 2 or more code parts while keeping alt pressed and then change those parts together by typing
once only)
(4) Alt+ space + (down arrow button) <- to write the same thing in below lines. Example:
(5) Lorem<no. of words> <- to give a certain no. of random words in the code.
(6) Alt+ space + (down arrow button) <- to place a line after the line(s) present below it.
(7) Ctrl + / <- To turn a line into a comment.
(8) Shift + Tab <- to remove indentation, by 1 whitespace.
<a href="google.com">cover_name</a> <- It's an anchor tag to show links on the website. Cover name will be present in place
of the original link. Cover name is optional.
<a target="_blank" href="google.com">cover_name</a> <- target="_blank" opens the link in a new tab, instead of the
original tab
<br> tag is used to give a break between lines of code. It gives the next line of code in a new line. It doesn't have a closing tag.
<img src="img_link" alt="alternate_text"> <- To put an image on the website. Alternate text is displayed when website
doesn’t show the image.
<pre></pre> <- It's used to print the content as it is, without removing extra whitespaces (if given) between characters/ words, etc.
<img width="200" height="250" src="img_link" alt="alternate_text"> <- width, height and style attributes may also be added to modify
the image.
<table><captions>Students</captions><tr><th>Roll</th><th> Name</th></tr>
<tr><td>10</td><td> Manny</td></tr></table> <- to create tables, containing caption at top, rows, columns. 1st row has headings,
2nd row has data. <tr> =table row, <th>=table heading, <td>= table data
<td colspan="2">Hi</td> <- colspan allows us to make a single value occupy n no. of columns.
Here, "Hi" will occupy the space of 2 columns. Similar to merge columns in MS Excel.
<td rowspan="4"> Manny</td> <- rowspan allows us to make a single value occupy n no. of rows.
Here, "Manny" will occupy the space of 4 rows. Similar to merge rows in MS Excel.
<captions>Students</captions> <-- captions are used at the top, before the table starts.
<thead>Head</thead><tfoot>foot</tfoot> <- to add header and footer to the table. Header tag is put at the beginning, while
footer tag is put at last.
<tbody>body</tbody> <- it's used in combo with <thead> and <tfoot> tags for grouping in table.
Lists:
(1) <ul> Unordered List <li>harry</li><li>bulbul</li></ul> <- Unordered list, list items are not numbered.
(2)<ol> Ordered List<li>harry</li><li>bulbul</li></ol> <- Ordered list, list items are numbered.
(3)<dl><dt>Hi</dt>
New Section 1 Page 1
Saturday, July 19, 2025 1:18 PM
Useful websites are created using a combo of HTML, Java Script (js) and Cascading Stylesheets (css).
Connecting js to html: Typing "script:src" in body section gives us "<script src=""></script>", in which we type our javascript file name. For eg:
"<script src="style.js"></script>"
Connecting css to html: Typing "link:css" in head section gives us "<link rel="stylesheet" href="style.css">", in which we type our css file
name. For eg: "link rel="stylesheet" href="hi.css">". By default the name of css file is given as "style.css" in the "link:css" shortcut.
Shortcuts: (1)! <- By typing '!' and pressing enter, we get the boiler plate code.
(2) Alt+ shift+ (down arrow button) <- to copy a line below it.
(3) Alt <- (select 2 or more code parts while keeping alt pressed and then change those parts together by typing
once only)
(4) Alt+ space + (down arrow button) <- to write the same thing in below lines. Example:
(5) Lorem<no. of words> <- to give a certain no. of random words in the code.
(6) Alt+ space + (down arrow button) <- to place a line after the line(s) present below it.
(7) Ctrl + / <- To turn a line into a comment.
(8) Shift + Tab <- to remove indentation, by 1 whitespace.
<a href="google.com">cover_name</a> <- It's an anchor tag to show links on the website. Cover name will be present in place
of the original link. Cover name is optional.
<a target="_blank" href="google.com">cover_name</a> <- target="_blank" opens the link in a new tab, instead of the
original tab
<br> tag is used to give a break between lines of code. It gives the next line of code in a new line. It doesn't have a closing tag.
<img src="img_link" alt="alternate_text"> <- To put an image on the website. Alternate text is displayed when website
doesn’t show the image.
<pre></pre> <- It's used to print the content as it is, without removing extra whitespaces (if given) between characters/ words, etc.
<img width="200" height="250" src="img_link" alt="alternate_text"> <- width, height and style attributes may also be added to modify
the image.
<table><captions>Students</captions><tr><th>Roll</th><th> Name</th></tr>
<tr><td>10</td><td> Manny</td></tr></table> <- to create tables, containing caption at top, rows, columns. 1st row has headings,
2nd row has data. <tr> =table row, <th>=table heading, <td>= table data
<td colspan="2">Hi</td> <- colspan allows us to make a single value occupy n no. of columns.
Here, "Hi" will occupy the space of 2 columns. Similar to merge columns in MS Excel.
<td rowspan="4"> Manny</td> <- rowspan allows us to make a single value occupy n no. of rows.
Here, "Manny" will occupy the space of 4 rows. Similar to merge rows in MS Excel.
<captions>Students</captions> <-- captions are used at the top, before the table starts.
<thead>Head</thead><tfoot>foot</tfoot> <- to add header and footer to the table. Header tag is put at the beginning, while
footer tag is put at last.
<tbody>body</tbody> <- it's used in combo with <thead> and <tfoot> tags for grouping in table.
Lists:
(1) <ul> Unordered List <li>harry</li><li>bulbul</li></ul> <- Unordered list, list items are not numbered.
(2)<ol> Ordered List<li>harry</li><li>bulbul</li></ol> <- Ordered list, list items are numbered.
(3)<dl><dt>Hi</dt>
New Section 1 Page 1
