From 229c991c31f523c14f146f46cdda206654585991 Mon Sep 17 00:00:00 2001 From: Suraj B M <100959814+silicoflare@users.noreply.github.com> Date: Wed, 30 Aug 2023 23:03:03 +0530 Subject: [PATCH] Add files via upload --- data/basics-and-html.svg | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 data/basics-and-html.svg 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 TechnlogiesURL(Uniform resource Locater)https://www.xyz.com/......Protocol/SchemeSub DomainTLD (Top level domain)Domain NameLoading a website 1. DNS lookup 2. IP lookupDomain Name system Converts Domain name into IP addressInternet Protocol address Fetches content from IPProcess of DNS lookup1. User Enters URL (xyz.com) which is received by a DNS resolver2. resolver forwards query to Root Server3. Root server returns the TLD of the URL4. resolver forwards query to TLD server5. TLD server returns authoritative confirmation6. resolver forwards query to the domain7. domain returns IP address8. 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 browserIP AddressIt is a unique identification given to each device associated with a computer networkFor 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.1Each number/Element is called an octetIt is stores as 8 bit binary valueSo the maximum an element can be is 255 (11111111 = 255)2001:0db8:85a3:0000:0000:8a2e:0370:7334HTTPHyper Text Transfer ProtocolThis is a set of rules (protocols) Used by devices on a computer networkto communicate between servers and Transfer Data / InformationIt works with sending 'requests' to the internet and receiving 'responses' from serversand 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' sessionsHTTPSHyper Text Transfer Protocol over secure socket layerThis uses SSL (secure socket layer)which is a cryptographic protocolWebsite should have a SSL certificate on its server Transfer ProtocolHTTP again is built on various Protocols.One such crucial protocol is the TRANSFER protocolsThese protocols help is establishing a connection with the serverThey send information (requests) in packets and again get back information (response) in packets or multi packetsdepending on data size For TRANSFER protocols there are of 2 typesUDPUser Datagram ProtocolThis Is Not widely used as it isUnreliable in packet transfer andhas security issues TCPTransmission Control ProtocolWidely Used because of its reliability and increased security TCP again is made on different protocolslike SMTP, FTP etc.HTTP Requests and responsesEach query the http client raises is a 'request',and the server responds to this request with a 'response'RequestsRequest methodsPOSTGETIt is used to retrieve dataData to be sent is appendedin the URLData can be easily identifiedas it is sent in a human readableform via the URLLess secure as data is cached,and it remains in browser historyIt is used to Send dataData to be sent is sent in a separate bodyData cannot be easily identified as it is encryptedData is more secureForm when submitted automaticallychange from GET to POSTLook of a requestGET / xyz.html HTTP/1.1Host : zyz.comUser-Agent : mozilla windows....Accept : text....Request lineHeadersRequest line is of the format,Method, target URL, HTTP versionThen Header files contain additional detailsIf the method is POST there mightas well be a body tog after headerto convey the details.ResponsesLook of a responseTypes of a Transmission ConnectionsPersistentNon - PersistentResponse CodesHTTP/1.1 200 OKDate : ....Server : ...Content type : ....Response line is of the format,HTTP verion, status code, Status messageResponse LineHeadersThen header files again contain additional details Based on the type of response there might be abody alsoHere transmission connectionstill exists after responseTakes 2 RTT (round trip time) forsome communicationDefault mode of HTTP/1.1Here transmission connection is closedafter responseTakes 2 RTT (round trip time) + file transmission timeDefault mode of HTTP/1.01. Information responses Status code : 100-199 example - 100 Continue This tells that the processes till now are successful and we can continue2. Successful responses Status code : 200-299 example - 200 OK This informs that the processes are successful3. Redirection Status code : 300-399 example - 301 move permanently A new URL is returned4. Client error Status code : 400-499 example - 400 Bad Request An error in Request5. Server Error Status code : 500-599 example - 500 Internal Server Error Server does not know respone/ does not know how to reactHTML 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..Bodyto add content in the webpageHTML Basic TagsHeading tags<h1> </h1>........<h6> </h6>As the number increases the boldness and font decreasesHorizontal 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 worksFormatting Tagsboldwe can use both <b> .. </b> or <strong> ... </strong>but 'strong' has a semantic meaning of 'highlight' associated with itItalicswe can again use both <i> ... </i> or <em> ... </em>but 'em' has a semantic meaning of 'emphasise' associated with itSubscript<sub> ... </sub>Superscript<sup> ... </sup>underline<u> ... </u>Blockquote<blockquote> ... </blockquote>This adds an indentation to the text and adds a newline at the endexample These by default are underlinedUnvisited links are bluevisited are purple andactive link (when u click them) are redImage tagtags used to add image, using some attributes we can style these into desired size and positionbasic syntax <img> (no closing tag)attributes1. src :- this is used to give the source of the image, either local address or a link2. alt :- this is a text which will be displayed in case the image cannot be loaded3. height, width :- these attributes are used to set the size of the image4. align (outdated no one uses it anymore ) :- to give vlaues like 'left', 'right' to position the imageexample :AttributesThese are key value pairs added in the heading of a tagMain uses lie in styling and CSSsome 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">ListsUnordered 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 listli - List Itemdefault icon is filled circleol - ordered listli - list itemdefault ordering is numericdl - definition listdt - definition termdd - definition descriptionTableBoilerplate / 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 rowwe use this tag to create a new rowtd - Table dataUsed to add content in cellsof a rowAll of this is inside a table tag <table> ... <table>there are a lot more tagsinstead of tr like, thead, th,tfoot, tbody etc.but all have more of a semantic meaning and moreor less work as the tr tag itselfSetting 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 CSSproperty 'border-collapse'There are some attributes we can use to beautify the table1. cellpadding we use this add padding (create space) around a text in a cell2. cellspacing we use this to add padding b/w two cells3. align we can use align (left , right) or valign (vertical align) (top bottom) (both outdated) to position content of a table4. colspan we can give this attribute to a cell (td) to make it span over some cells horizontaly5. rowspan will span the cell vertically3. <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 FORMSInput tagSpecial tagtypes :-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 datafew attributes that can be used are,1. name - helps identify which question / type sent data belongs to. It also helps group multiple questions2. value - helps tag a particular option / reply so that it can mapped to laterspecial attributes for text fields1. size - if a user enters 'x' . it sets the length of the field to fit x chars2. maxlength - the maximum number or chars a user can enter3. 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-areaUsed to add multiple line text input areathis area is resizableattributescols - to set columns sizerows - to set rows sizewrap - \ No newline at end of file