for paragraphs,

-

for headings, for bold, for italic, for images, for tables, for forms, and for metadata."> for paragraphs,

-

for headings, for bold, for italic, for images,
for tables, for forms, and for metadata.">
[go: up one dir, main page]
Scribd
Upload
938 views4 pages

HTML Shortcuts

The document provides an overview of common HTML tags and their uses. It lists tags for text formatting, lists, links, images, tables, forms, and meta data. Key tags covered include <p> for paragraphs, <h1>-<h6> for headings, <b> for bold, <i> for italic, <img> for images, <table> for tables, <form> for forms, and <meta> for metadata.

Uploaded by

Wedad Ahmad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
938 views4 pages

HTML Shortcuts

The document provides an overview of common HTML tags and their uses. It lists tags for text formatting, lists, links, images, tables, forms, and meta data. Key tags covered include <p> for paragraphs, <h1>-<h6> for headings, <b> for bold, <i> for italic, <img> for images, <table> for tables, <form> for forms, and <meta> for metadata.

Uploaded by

Wedad Ahmad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Dr.

Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags

Text
<p> text </p> Block element
<h1>text.. </h1> …. <h6>text… </h6> Block elements
<b> to be bold </b> Inline elements Bold text
<i> to be italic </i> Italic text
<u> to be underlined </u> Underlined text
<strong> </strong> Strong (bold) text
<em> </em> Emphasized (italic) text
<s> </s> Through line text
<mark> </mark> Highlighted text
<sup> above text </sup> Inline elements
<sub> under text </sub>
<br /> Make new line
<hr /> Make new line and draw line
<pre> </pre> Keep format as it ( keep white spaces)
<blockquote>text </blockquote> Block element In “ quote “ in new line
<q> text </q> Inline element In “quote ” in the same line
Text <cite> author </cite> inline element To add reference at the end of text
<dfn> name </dfn> definition inline element Includes name of definition
<abbr title="Professor" > Prof </abbr> Block element
Lists
<li> item list </li> Block element
<ol type="1", > </ol> Block element type="1", “A”, “a”, “I”, “I”
<ul type="disc"> </ul> Block element type="disc", “circle", "square"
<dl> </dl> Block element
<dt> definition text </dt> Block element
<dd> definition </dd> Block element
Page Organizing
<main> </main> Main content, one main in page
<header> </header> introduction to a page
<footer> </footer> end of a page
<section> </section> To divide long web document
Layout
<article> </article> self-contained works that could stand
Design alone (can have multiple sections)
<aside> </aside> content that is separate from content
<nav> </nav> provides more semantic meaning for
unordered list.
Links
<a href="link" > text </a> Inline href="http://www.empireonline.com"
href="index.html"
href="../../index.html"
<a href=”mailto:jon@d .org” >text Inline mailto:email address
</a>

1
Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags

<a href="link" target="_blank"> text </a> target="_blank" open in new window


<a href="link#id" > text </a> href="link#id" go to element with the Id
Images
<img src="url" alt= "text" > Inline src= url of the image
alt= alternative text
title= extra info shown with mouse hover
height=, width=
<figure> <img src=”url1” >
<img src=”url2”>
<figcaption> caption
text</figcaption>
</figure>
<img src=”url for 200px.jpg" alt="" A device with a standard screen density gets
srcset=”url for 400px.jpg 2x, only the 200px Higher densities get larger
=”url for 600px.jpg 3x" > images
<img src="url-640.jpg" alt="alt text" sizes=" how much the image will
srcset=" url -480.jpg 480w, url -960.jpg 960w, take width of the given width
url -1280.jpg 1280w, url -2400.jpg 2400w"
sizes="100vw">
<picture> if the viewport >= 1024 pixels wide,
<source media="(min-width: 1024px)" use the large version of image
srcset="url large.jpg"> If viewport>=760 pixels and <1024,
<source media="(min-width: 760px)" srcset=" use the medium image
url medium.jpg"> Else use small image
<img src=" url -small.jpg" alt="alt text">
</picture>
<picture><source type="image/webp" First format supported will be used
srcset="pizza.webp">
<source type="image/jxr" srcset="pizza.jxr">
<img src="pizza.jpg" alt="">
</picture>
Tables
<table > <caption>caption text </caption> <tr> new row
<tr> <td> text </td> <td> text </td>… </tr> <td> cell
<tr> <td> text </td> <td> text</td>…</tr> <th> column header
</table> <th scope=”col”> column header
<th scope=”row”> row header
<td colspan=”2”> </td> expand cell
to 2 columns
<td rowspan=”2”> </td> expand
cell to 2 rows
<thead> <thead> table header

2
Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags

<tbody> <tbody> table body


<tfoot> <tfoot> table footer
Forms
<form action="url" method="get"> <Input> empty element
content <Input> type= can be text,
label: <input type="text" name="username" password, radio, checkbox, search,
size="15" maxlength="30" /> email, tel, url, hidden, date, time,
<textarea name="comments" cols="20" month, week, number, range, color
rows="4"> initial text </textarea>
<input type="radio" name="text" value="text" <textarea> closed element
checked="checked" /> label
<input type="radio" name="text" value="text"
/> label
<input type="checkbox" name="text"
value="text" checked="checked" /> label
<input type="checkbox" name=" text "
value=" text " /> label
</form>
<form action="url" method="get"> <select> </select> dropdown list
content Multiple multiple values selected
<select name="devices"> <optgroup label="text"> </optgroup>
<option value="text" > label</option> give label for group of options
<option value=" text "> label </option> size="num" lines to be display
<option > label </option>
</select> <option> </option> choice
</form> • No values, label is submitted
selected="selected" selected by
default
<form action="url" method="post"> type=”file, method must be ="post">
content
<input type="file" name="text" />
<input type="submit" value="label" />
<input type=” image" src="url"
width="100" height="20" />
</form>
<label>Label: <input type="text" name="age" Wrap wound
/> </label> <label> <input> </label>
Label: Using for
<input id="fe" type="radio" name="gender" <input id=”v” >
value="f"> <label for=”v” > </label>
<label for="fe" >Female</label>

3
Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags

For any controller


<input id="male" type="radio" name="gender" required="required" to enforce the
value="m"> user to fill before submitting
<label for="male">Male </label>
<fieldset> Related controller grouped together
<legend>title</legend> in a box with title above
content </fieldset>
Meta
<!DOCTYPE html> <meta/> give meta data about page
<html> <head> name="description" gives what the
<title>title </title> page is about
<meta name="description" content="An Essay on name="keywords" words that might
Installation Art" /> user search for
<meta name="keywords" content="installation, art, name="robots" to be included in
opinion" /> search results of not
<meta name="robots" content="nofollow" /> http-equiv="author" defines page
<meta http-equiv="author" content="Jon Duckett" author
/> http-equiv="pragma" do not cache this
<meta http-equiv="pragma" content="no-cache"/> page
<meta http-equiv="expires" content="Fri, 04 Apr http-equiv="expires" when the chase
2014 23:59:59 GMT" /> should be expired
</head>
<body> </body>
</html>
Escaping character
&lt; Less than sign
&#60;

Dr. Jamil Alagha

BSWE 4327 - Programming Web

University of Palestine

You might also like