Web Development HTML Basics

2017-09-09 15:45:00 +01:00
parent 05269a8f83
commit 542520b7a8
2 changed files with 90 additions and 0 deletions
--- a/WebDevelopment/01-HTMLBasics/image.jpg
+++ b/WebDevelopment/01-HTMLBasics/image.jpg
--- a/WebDevelopment/01-HTMLBasics/test.htm
+++ b/WebDevelopment/01-HTMLBasics/test.htm
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+    <head>
+        <title>My website</title>
+    </head>
+
+    <body>
+    
+        <!-- Headings -->
+        <h1>My header</h1>
+        <h2>My header</h2>
+        <h3>My header</h3>
+
+        <!-- Paragraph -->
+        <p>This is a paragraph of text :)</p>
+
+        <!-- Links (anchors) -->
+        <p>This is a link to google <a href="http://www.google.com">Click here</a> </p>
+
+        <!-- Image --> 
+        <img src="image.jpg" width="50" />
+
+        <!-- Inline vs block -->
+        <p>This is a paragraph</p>
+        <p>This is a paragraph</p>
+
+        <span>This is a span</span><br/>
+        <span>This is a span</span><br>
+        <span>This is a span</span>
+        
+        <!-- Horizontal rule -->
+        <hr>
+
+        <!-- A block quote -->
+        <blockquote>This is a block quote</blockquote>
+
+        <!-- Some code -->
+        <pre>var item1 = "mmmm";</pre>
+        <pre>var some2 = "iiii";</pre>
+
+        <p>When using the <code>item1</code> variable...</p>
+
+        <!-- Lists -->
+        <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+        </ul>
+
+        <ol>
+            <li>Item</li>
+            <li>Item</li>
+            <li>Item</li>
+        </ol>
+            
+        <!-- Bold -->
+        <p>Some <b>bold</b> text and some <strong>strong</strong> text</p>
+
+        <!-- Italic --> 
+        <p>Some <i>italic</i> text and some <em>emphasized</em> text</p>        
+
+        <!-- Div general container -->
+        <div>
+            <span>test</span>
+        </div>
+        <div>
+            <span>test</span>
+        </div>
+
+        <!-- Buttons -->
+        <p><button>my button</button></p>
+
+        <!-- Label -->
+        <p><label for="myInput">Username</label></p>
+
+        <!-- Input -->
+        <p><input id="myInput" value="my text" /></p>
+
+        <!-- Multi line text box -->
+        <p><textarea>test</textarea></p>
+
+        <!-- A group of options to select -->
+        <select>
+            <option>Option 1</option>
+            <option selected>Option 2</option>
+            <option>Option 3</option>
+        </select>
+
+    </body>
+</html>