diff --git a/data/basics-and-html.svg b/data/basics-and-html.svg
new file mode 100644
index 0000000..0cceb0a
--- /dev/null
+++ b/data/basics-and-html.svg
@@ -0,0 +1,17 @@
+
+
+
+
+ Web Technlogies URL (Uniform resource Locater) https://www.xyz.com/...... Protocol/Scheme Sub Domain TLD (Top level domain) Domain Name Loading a website 1. DNS lookup 2. IP lookup Domain Name system Converts Domain name into IP address Internet Protocol address Fetches content from IP Process of DNS lookup 1. User Enters URL (xyz.com) which is received by a DNS resolver 2. resolver forwards query to Root Server 3. Root server returns the TLD of the URL 4. resolver forwards query to TLD server 5. TLD server returns authoritative confirmation 6. resolver forwards query to the domain 7. domain returns IP address 8. resolver returns IP address to the web browser 1. Raises a HTTP request to the IP address 2. Server (where IP is located) returns loadable content which is rendered in the browser IP Address It is a unique identification given to each device associated with a computer network For a local network the HOST IP address is 127.0.0.1 (This is also called loopback address) IPV4 (Internet Protocol Version 4) This has 4 decimal numbers separated by '.' IPV6 (Internet Protocol Version 6) This has 8 hexadecimal Numbers separated by ':' 127.0.0.1 Each number/Element is called an octet It is stores as 8 bit binary value So the maximum an element can be is 255 (11111111 = 255) 2001:0db8:85a3:0000:0000:8a2e:0370:7334 HTTP Hyper Text Transfer Protocol This is a set of rules (protocols) Used by devices on a computer network to communicate between servers and Transfer Data / Information It works with sending 'requests' to the internet and receiving 'responses' from servers and communicating this to the http client (host) HTTP is 'stateless' -: no link b/w two requests. To overcome this we have 'cookies' which create a session of requests, converting it into 'statefull' sessions HTTPS Hyper Text Transfer Protocol over secure socket layer This uses SSL (secure socket layer) which is a cryptographic protocol Website should have a SSL certificate on its server Transfer Protocol HTTP again is built on various Protocols. One such crucial protocol is the TRANSFER protocols These protocols help is establishing a connection with the server They send information (requests) in packets and again get back information (response) in packets or multi packets depending on data size For TRANSFER protocols there are of 2 types UDP User Datagram Protocol This Is Not widely used as it is Unreliable in packet transfer and has security issues TCP Transmission Control Protocol Widely Used because of its reliability and increased security TCP again is made on different protocols like SMTP, FTP etc. HTTP Requests and responses Each query the http client raises is a 'request', and the server responds to this request with a 'response' Requests Request methods POST GET It is used to retrieve data Data to be sent is appended in the URL Data can be easily identified as it is sent in a human readable form via the URL Less secure as data is cached, and it remains in browser history It is used to Send data Data to be sent is sent in a separate body Data cannot be easily identified as it is encrypted Data is more secure Form when submitted automatically change from GET to POST Look of a request GET / xyz.html HTTP/1.1 Host : zyz.com User-Agent : mozilla windows.... Accept : text.... Request line Headers Request line is of the format, Method, target URL, HTTP version Then Header files contain additional details If the method is POST there might as well be a body tog after header to convey the details. Responses Look of a response Types of a Transmission Connections Persistent Non - Persistent Response Codes HTTP/1.1 200 OK Date : .... Server : ... Content type : .... Response line is of the format, HTTP verion, status code, Status message Response Line Headers Then header files again contain additional details Based on the type of response there might be a body also Here transmission connection still exists after response Takes 2 RTT (round trip time) for some communication Default mode of HTTP/1.1 Here transmission connection is closed after response Takes 2 RTT (round trip time) + file transmission time Default mode of HTTP/1.0 1. Information responses Status code : 100-199 example - 100 Continue This tells that the processes till now are successful and we can continue 2. Successful responses Status code : 200-299 example - 200 OK This informs that the processes are successful 3. Redirection Status code : 300-399 example - 301 move permanently A new URL is returned 4. Client error Status code : 400-499 example - 400 Bad Request An error in Request 5. Server Error Status code : 500-599 example - 500 Internal Server Error Server does not know respone/ does not know how to react HTML Boilerplate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> Head to add title on tab, add stylesheets, including metadata etc.. Body to add content in the webpage HTML Basic Tags Heading tags <h1> </h1> ........ <h6> </h6> As the number increases the boldness and font decreases Horizontal Line <hr> paragraph tag (text) <p>...</p> anchor tag (hyperlink) <a href=""> ... </a> break tag (new line) <br/> (<br>, </br> also work) comments <!-- ...... --> * HTML tags are not case sensitive, So body BODY, BoDy all works Formatting Tags bold we can use both <b> .. </b> or <strong> ... </strong> but 'strong' has a semantic meaning of 'highlight' associated with it Italics we can again use both <i> ... </i> or <em> ... </em> but 'em' has a semantic meaning of 'emphasise' associated with it Subscript <sub> ... </sub> Superscript <sup> ... </sup> underline <u> ... </u> Blockquote <blockquote> ... </blockquote> This adds an indentation to the text and adds a newline at the end example These by default are underlined Unvisited links are blue visited are purple and active link (when u click them) are red Image tag tags used to add image, using some attributes we can style these into desired size and position basic syntax <img> (no closing tag) attributes 1. src :- this is used to give the source of the image, either local address or a link 2. alt :- this is a text which will be displayed in case the image cannot be loaded 3. height, width :- these attributes are used to set the size of the image 4. align (outdated no one uses it anymore ) :- to give vlaues like 'left', 'right' to position the image example : Attributes These are key value pairs added in the heading of a tag Main uses lie in styling and CSS some attrbiutes are :- class, id, style etc.. example <a href="#", class="link", id="link1"> ... </a> <img src="xyz.png" alt="An image" height="200px" align="right"> Lists Unordered list <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> Ordered list <ol> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ol> Descriptive lists <dl> <dt>Lorem</dd> <dd>Lorem, ipsum dolor.</dt> <dt>Lorem</dd> <dd>Lorem, ipsum dolor.</dt> <dt>Lorem</dd> <dd>Lorem, ipsum dolor.</dt> </dl> ul - Unordered list li - List Item default icon is filled circle ol - ordered list li - list item default ordering is numeric dl - definition list dt - definition term dd - definition description Table Boilerplate / Syntax <table border="1"> <tr> <td>Tag</td> <td>Name</td> </tr> <tr> <td>p</td> <td>Paragraph</td> </tr> <tr> <td>u</td> <td>Underline</td> </tr> <tr> <td>b</td> <td>Bold</td> </tr> </table> tr - Table row we use this tag to create a new row td - Table data Used to add content in cells of a row All of this is inside a table tag <table> ... <table> there are a lot more tags instead of tr like, thead, th, tfoot, tbody etc. but all have more of a semantic meaning and more or less work as the tr tag itself Setting the attribute border=1 in table tag :- There are double borders here (border for each cell) for a single border we have to add a CSS property 'border-collapse' There are some attributes we can use to beautify the table 1. cellpadding we use this add padding (create space) around a text in a cell 2. cellspacing we use this to add padding b/w two cells 3. align we can use align (left , right) or valign (vertical align) (top bottom) (both outdated) to position content of a table 4. colspan we can give this attribute to a cell (td) to make it span over some cells horizontaly 5. rowspan will span the cell vertically 3. <table border=1 cellpadding=40> <tr> <td>Tag</td> <td>Name</td> </tr> <tr> <td rowspan="2">bold</td> <td >b</td> </tr> <tr> <td>stong</td> </tr> </table> <table border=1 cellpadding=40> <tr> <td>Tag</td> <td>Name</td> </tr> <tr> <td colspan="2">bold</td> </tr> <tr> <td >b</td> <td>stong</td> </tr> </table> HTML FORMS Input tag Special tag types :- Text Fields – Allows the user to input text data in a one line field Radio Buttons – Allows the user to select one option from multiple options Checkboxes – Allows the user to select many options from multiple options Submit Button – Allows the user to send the data few attributes that can be used are, 1. name - helps identify which question / type sent data belongs to. It also helps group multiple questions 2. value - helps tag a particular option / reply so that it can mapped to later special attributes for text fields 1. size - if a user enters 'x' . it sets the length of the field to fit x chars 2. maxlength - the maximum number or chars a user can enter 3. value - Here value can be used to have a default, text [placeholder like] <form method="post" action="#"> Enter name <input type="text" size="10" value ="Enter text"> <br> <input type="radio" name="r-option"> test1 - radio <br> <input type="radio" name="r-option"> test2 - radio <br> <input type="checkbox" name="c-option"> test3 - radio <br> <input type="checkbox" name="c-option"> test4 - radio <br> <input type="submit" value="Submit form"> </form> <form method="post" action="#"> <textarea name="" id="" cols="30" rows="10">Enter text here</textarea> </form> text-area Used to add multiple line text input area this area is resizable attributes cols - to set columns size rows - to set rows size wrap -