echo '' ;

HTML Language

  • 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.html or http://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>

HTML Online Editor Tool

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.