sololearn html

1.1 what is html

  • hypertext markup language

2.1 basic html document structure

  • html tag
  • head tag
  • body tag
<html>
<head>
</head>
<body>
</body>
</html>

3.1 creating your first html page

  • title tab
<head>
<title>first page</title>
</head>

4.1 creating a blog

<title>my blog</title>

5.1 module quize

6.1 heading,lines,comments

  • html heading

- horizontal line
- comment <!--your comment goes here -->

7.1 paragraphs

  • p element <body><p>..</p></body>
  • add a single line

8.1 formatting

<body>
  <p>this is regular text</p>
  <P><b>bold text</b></p>
  <p><big>big text</big><p>
  <p><i>italic text<i></P>
  <p><small>small text</small></P>
  <p><strong>strong text</strong></P>
  <p><sub>subscripted text</sub></P>
  <p><sup>superscripted text</sup></P>
  <p><ins>inserted text</ins></P>
  <p><del>deleted text</del></P>
</body>

9.1 blog project:about me

<h1><span>about me</span><h1>
<p>hey! i'm <strong>alex</strong>.coding has changed my world ...</p>
<p class="quote">"declear variables, not war"</p>

10.1 elements

<body>
<p>this is a paragraph<br/></p>
</body>

11.1 attributes

<p align="center">this text is aligned to center</p> <hr width="50px" /> <hr width="50%" />

12.1 images

  • img tag <img src="img.jpg" alt="" />
  • image resize <img src="tree.jpg" height="150px" width="150px" alt="" />
  • image border <img src="tree.jpg" height="150px" width="150px" border="1px" alt"" />

13.1 lists

  • ordered list
    <ol>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
    </ol>

14.1 blog project : my skills

<h1><span>my skills</span></h1>
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>

15.1 tables

  • table <table>
  • table rows <tr>
  • table date <td>
    <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    </table>

<table border="2"> <td colspan="2"><br/></td> <table align="center"></table> <td bgcolor="red">red</td>

16.1 links

`learn play

17,1 blog project : my schedule

  • th (table headers)
    <table>
    <tr>
      <th>day</th>
      <th>mon</th>
      <th>tue</th>
      <th>wed</th>
      <th>thu</th>
      <th>fri</th>
    </tr>
    </table>

18.1 inline and block element

- block element
<h1><form><li><ol><ul><p><pre><table><div>etc
- inline element
<b><a><strong><img><input><em><span>etc

19.1 forms

<form action="http://...." method="post" /></form>
<form input="text" name="username" /><br/>
<form>
  <input type="text" name="username" /><br/>
  <input type="password" name="password" />
</form>

<input type="radio" name="gender" value="male" />male<br/>
<input type="radio" name="gender" value="remale" />female<br/>

<input type="submit" value="submit" />

20.1 blog project : contact form

<h1><span>contact me</span></h1>
<form>
    <input name="name" type="text" /><br/>
    <input name="email" type="email" /><br/>
    <textarea name="message"></textarea><br/>
    <input name="submit" value="send" class="submit" />
</form>

21.1 html colors

<head>
  <title>first page</title>
</head>
<body bgcolor="#000099">
  <h1>
    <font color="#ffffff">white headline</form>
  </h1>
</body>

22.1 frames

<frameset cols="100, 25%, "></frameset>
<frameset rows="100, 25%, "></frameset> 

<frame noresize="noresize">

<frameset cols="25%,50%,25%">
  <frame src="a.html"/>
  <frame src="b.html"/>
  <frame src="c.html"/>
  <noframes>frames not supported!</noframes>
</frameset>

23.1 blog project : putting it all together

<div class="section">
  <h1><span>my media</span></h1>
  <iframe height="150" width="300"
  src="youtube.com"
  allowfullscreen frameborder="0"></iframe>
</div>

24.1 module quiz

25.1 challenge1