Simple Web Design using HTML
Simple Web Design using HTML :
Create a document that conforms to HTML5 standards and has the following
elements
doctype, html, meta (in the revised html5 format), title, body, head, div, p, headings, image, anchor, table, list, html comment
- Your site is very simple. It consists of a page heading and 2 sections. Each section contains a sub heading and some text. You can make it dummy text, it doesn’t matter.
- Section1: dummy text + all types of hyperlinks [external link with target, internal link, email link, phone link, and clickable image].
- Section 2 dummy text + ordered nested List and unordered nested list.
- Section 3: dummy text + table in the given format
to display
information in rows and columns.
Complete HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>sandeep.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body bgcolor="#00cccc"><font color="white">
<b><h1 align="center">Sandeep.edu</h1></b>
<hr>
<h2><marquee>Youtube</marquee></h2>
<h3><b>Video Education</b></h3>
<font color="black" face="verdana"><p>Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.
Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign.
</p></body></font>
<a href="mailto:sandeepsimeon@gmail.com">E-MAIL</a><br/>
<a href="tel:8466015568">Phone.no</a><br/>
<a href="www.karunya.edu"><img src="ku.png" length="150" width="150"></a><b>Clickable Image</b>
<b><h1>Time Table</h1></b>
<h2>Online Video Streaming<h2>
<table border="8" align="center" bgcolor="pink">
<tr>
<td>Row1-col1</td>
<td>Row1-col2</td>
<td>Row1-col3</td>
<td colspan="2" rowspan="4">Row 1,2,3&4-col4</td>
</tr>
<tr>
<td>Row2-col1</td>
<td colspan="2" rowspan="3">Row 2,3&4-col2&3</td>
</tr>
<tr>
<td>Row3-col1</td>
</tr>
<tr>
<td>Row4-col1</td>
</tr>
<tr>
<td colspan="2">Row5-col1&2</td>
<td colspan="2">Row5-col3&4</td>
</tr>
<tr>
<td colspan="4" align="center">Row6-col1,2,3&4</td>
</tr>
</table>
This is fairly complicated mixed list created in CKEDITOR.
<ul>
<li>First item</li>
</ul>
<ol start="1">
1.First item of the nested list.</br>
2.Second item of the nested list.
<ul type="square">
<li>This item is nested even further</li>
<li>And this one too</li></br>
<ol type="A">
<li>First item of yet another number list
<li>Second item of yet another number list
</ol></ol>
</ul>
<ul>
<li>second item</li>
<li>third item</li>
</ul>
</ol>
</font></body>
<hr height=10px solidblack>
<footer><font color="blue"><a href="#top">Go to Subheading 1 </font></a>| Go to Subheading 2 </footer>
</html>
- - - - - - - - - - - - ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ - - - - - - - - - - - - Sandeep Simeon
Comments
Post a Comment