- HTML stands for HyperText Markup Language
- This language describes the structure of Web pages using markup
- HTML elements are the building blocks of HTML pages
- These language elements are represented by tags
- HTML tags label pieces of content such as “
heading“, “paragraph“, “table“, and so on - Browsers do not display the HTML tags; instead, they use them to render the content of the page.
<!DOCTYPE html>the declaration defines this document to be HTML5<html>element is the root element of an HTML page<head>the element contains meta-information about the document<title>the element specifies a title for the document<body>the element contains the visible page content<h1>the element defines a large heading<p>the element defines a paragraph
Example: Hellow World
If you have a question like How Create a Local Web Server in Windows? here the solution.
- First, you will need a set up a local webserver tool like Apache or some other.
- Download and install XAMPP Software.
- When finish installation of XAMPP, By default the XAMPP control panel will be launched.
- Click “Start” for Apache and MySQL if needed.
- If you type localhost or the local machine IP address, the browser will then show the pages from http://localhost/dashboard/.
- Now create a new HTML page
- Use the below code and create a new doc name as “ArunEworld.html”
<html>
<head>
<title> ArunEwordl </title>
</head>
<body>
<h1> Hello World</h1>
<h2> www.facebook.com/ArunEworld </h2>
</body>
</html>
- Save that “ArunEworld.html” documents toot located in c:\xampp\htdocs\
- Now check this URL :
http://localhost/ArunEworld.htmlorhttp://192.168.1.100/ArunEworld.html - Done. Enjoy.
HTML Tags
HTML tags are element names surrounded by angle brackets:
Table in HTML
HTML Language
HTML Table Tag
- Table tag syntax : <table> </table>
- Table rows defines : <tr>
- Table cell defines : <td>
- Table header defines : <th>
Table Border of HTML
- Table boarder : <table border=”1″>
HTML Table Alignment
- Table alignment syntax : <table align=”left|right|center”>
- center – Center align table
- left – Left align tableTable alignment attribute values
- right – Right alien table
Text Alignment of HTML Table
- Table alignment syntax : <td align=”left|right|center|justify|char”>
- Table alignment attribute values
- left – Left align content
- center – Center align content
- right – Right alien content
- justify – Stretches the lines so that each line has equal width (like in newspapers and magazines)
- char – Aligns the content to a specific character
- Table alignment example : <td align=”right”>ArunEowrld</td>
HTML Table Background Color
- Syntax bgcolor=”#00FF00
Example of HTML Table
- Table Border : Enable/Disable
- Table alignment : center/right/left
<!DOCTYPE html> <html> <body> <table align="center" border="1" background-color ="gray" > <tr> <th>Sites</th> <th>Social Media</th> </tr> <tr> <td>www.ArunEworld.com</td> <td>facebook/ArunEworld</td> </tr> <tr> <td>www.ArunEworld.com/Embedded/ESP8266</td> <td>facebook/ESP8266InternetOfThings</td> </tr> </table> <p><b>Note:</b> The border attribute is not supported in HTML5. Use CSS instead.</p> </body> </html>
Output
Sites Social Media www.ArunEworld.com facebook/ArunEworld www.ArunEworld.com facebook/ESP8266InternetOfThings Note: The border attribute is not supported in HTML5. Use CSS instead.
HTML IMAGE
<img> in HTML
- Syntax : <img>
HTML <img> hspace Attribute
- You can make horizontal space between two image using hspace attribute.
- Add this hspace=”20″
Example
<a href="https://aruneworld.com/reviews/attachment/aruneworld_google_review_index/" rel="attachment wp-att-1299"> <img class="size-full wp-image-1299 alignnone" src="https://aruneworld.com/wp-content/uploads/2017/08/ArunEworld_Google_Review_index.jpg" alt="" width="300" height="156" hspace="20" /> </a> <a href="https://aruneworld.com/reviews/attachment/aruneworld_google_review_index/" rel="attachment wp-att-1299"> <img class="size-full wp-image-1299 alignnone" src="https://aruneworld.com/wp-content/uploads/2017/08/ArunEworld_Google_Review_index.jpg" alt="" width="300" height="156" hspace="20" /> </a>
Result
HTML <img> vspace Attribute
- You can make vertical space between two image using hspace attribute : vspace=”20″
Example
<a href="https://aruneworld.com/reviews/attachment/aruneworld_google_review_index/" rel="attachment wp-att-1299"> <img class="size-full wp-image-1299 alignnone" src="https://aruneworld.com/wp-content/uploads/2017/08/ArunEworld_Google_Review_index.jpg" alt="" width="300" height="156" vspace="20" /> </a> <a href="https://aruneworld.com/reviews/attachment/aruneworld_google_review_index/" rel="attachment wp-att-1299"> <img class="size-full wp-image-1299 alignnone" src="https://aruneworld.com/wp-content/uploads/2017/08/ArunEworld_Google_Review_index.jpg" alt="" width="300" height="156" vspace="20" /> </a>
Result
HTML <img> border Attribute
- Add a border of your image using this attribute
- syntax : <img border=”pixels”>
- CSS syntax : <img style=”border:5px solid black”>
- Examples : border=”5″
HTML <img> Rounded Images
- Use the border-radius property to create rounded images:
Before
After
iframe
Embed another website into another?
- Use iframe to embed another site into the site page or post.
<!DOCTYPE html>
<html>
<body>
<p>This is some text. This is some text. This is some text.
<iframe src="https://www.facebook.com/pg/adalur/photos/?ref=page_internal"
width="100%" height="500" frameborder="0"
allowfullscreen sandbox>
<p> <a href="https://www.facebook.com/pg/adalur/photos/?ref=page_internal">
Fallback link for browsers that don't support iframes
</a> </p>
</iframe>
This is some text. This is some text. This is some text.</p>
<p>The align attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>