{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"HTML basics","type":"text"}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"672d061e-f226-4eb8-9283-8529a0150d19"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"803d3977-3e72-47fe-ba76-88744eea04a6"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Structure of a html document","type":"text"}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"gliffy","parameters":{"macroParams":{"imageAttachmentId":{"value":"att2002092043"},"macroId":{"value":"0c1531a4-9803-45b0-8c48-dc8b37fc8f15"},"baseUrl":{"value":"https://projectbroadway.atlassian.net/wiki"},"name":{"value":"WebsiteDevelopmentHtmlDocumentStructure"},"diagramAttachmentId":{"value":"att2001993771"},"containerId":{"value":"2001633292"},"timestamp":{"value":"1686176117485"}},"macroMetadata":{"macroId":{"value":"fbea6a73-8503-48db-97f6-187beb15f74b"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"image","data":{"url":"https://confluence-connect.gliffy.net/diagram/image/placeHolder.png?imageAttachmentId=att2002092043¯oId=0c1531a4-9803-45b0-8c48-dc8b37fc8f15&baseUrl=https%3A%2F%2Fprojectbroadway.atlassian.net%2Fwiki&name=WebsiteDevelopmentHtmlDocumentStructure&diagramAttachmentId=att2001993771&containerId=2001633292×tamp=1686176117485"}}],"title":"Gliffy Diagram"}},"localId":"7dbbd8dc-7b0b-41d6-952c-07699ccfe27a"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"The head section","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"The title section","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"The meta section","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/tags/tag_meta.asp"}},{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"The style section","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"The script section","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"The body section","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Text formatting","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Basics","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"a54ad48c-1857-4d06-8271-678e51f91be7"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"

","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":" tags for paragraphs","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"non breaking spaces","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"

","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"headers","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"bold","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"italic","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"underline","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[380.0]},"content":[{"type":"paragraph","content":[{"text":"strikethrough","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Inline text formatting","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"My text","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":4},"content":[{"text":"Unordered list","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

Swift
Javascript

","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":4},"content":[{"text":"Ordered list","type":"text"}]},{"type":"paragraph"},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

Swift
Javascript

","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Images and videos","type":"text"}]},{"type":"paragraph"},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

","type":"text"}]},{"type":"paragraph"},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

","type":"text"}]},{"type":"paragraph","content":[{"text":"autoplay can be replaced by “controls“. Autoplay does not work.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Hyperlink","type":"text"}]},{"type":"paragraph"},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":" ... ","type":"text"}]},{"type":"paragraph","content":[{"text":"or ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"My link","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Anchors","type":"text"}]},{"type":"paragraph","content":[{"text":"Creating an anchor","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"Creating link","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"My link","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Tables","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":" \n\n \n\n \n \n\n \n\n \n \n \n \n\n

Sport	Response
Soccer	25

","type":"text"}]},{"type":"paragraph","content":[{"text":"Additional attributes:","type":"text"}]},{"type":"paragraph","content":[{"text":"colspan, nowrap, background (image), align","type":"text"}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"gliffy","parameters":{"macroParams":{"imageAttachmentId":{"value":"att2005893121"},"macroId":{"value":"9a018031-6e0c-409e-bb6f-5090d8abe316"},"baseUrl":{"value":"https://projectbroadway.atlassian.net/wiki"},"name":{"value":"HTMLTableAnatomy"},"diagramAttachmentId":{"value":"att2005860353"},"containerId":{"value":"2001633292"},"timestamp":{"value":"1686792321194"}},"macroMetadata":{"macroId":{"value":"2e12ce5e-9382-451e-86dc-e95ffc56afa1"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"image","data":{"url":"https://confluence-connect.gliffy.net/diagram/image/placeHolder.png?imageAttachmentId=att2005893121¯oId=9a018031-6e0c-409e-bb6f-5090d8abe316&baseUrl=https%3A%2F%2Fprojectbroadway.atlassian.net%2Fwiki&name=HTMLTableAnatomy&diagramAttachmentId=att2005860353&containerId=2001633292×tamp=1686792321194"}}],"title":"Gliffy Diagram"}},"localId":"ccc00ce7-701b-41cc-be96-6e09598ae401"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Forms","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Textfield","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Select Menu","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Checkbox","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"Full-Time\nPart-Time\nContract","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Radio button","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"Employed \nUnemployed\nUnemployed","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Text area","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Buttons","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"iFrames","type":"text"}]},{"type":"codeBlock","content":[{"text":" ","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"CSS Basics","type":"text"}]},{"type":"paragraph","content":[{"text":"At its most basic","type":"text"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":" ","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"A dedicated css file can be used if the following line is placed in the section of the html.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Classes","type":"text"}]},{"type":"paragraph","content":[{"text":"Declare classes like so:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":" .blueboldtext {\n font-size: small;\n color: blue;\n font-weight: bold;\n\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"And then reference them like so:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":" Lorem Ipsum is simply dummy text of the printing and typesetting industry.","type":"text"}]},{"type":"paragraph","content":[{"text":"You can chain classes. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"Lorem Ipsum is simply dummy text of the printing and typesetting industry.","type":"text"}]},{"type":"paragraph","content":[{"text":"If you want to apply the class to only a subsection of text you use the element.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Divs","type":"text"}]},{"type":"paragraph","content":[{"text":"You can define style for divs by using an ID:","type":"text"}]},{"type":"codeBlock","content":[{"text":" #div1 {\n \n width: 80%;\n border: 3px solid black;\n background: yellow;\n color: blue;\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"And apply them like so:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

This is a line of text

","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Nested divs","type":"text"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":" #background {\n background-image: url(txtbg.jpg);\n padding: 40px;\n }\n\n #textbox {\n width: auto;\n height: 100px;\n opacity: 0.8;\n background-color: black;\n padding: 10px;\n }\n\n .text {\n color: white;\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"and","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

\n\n

\n\n Learning a little each day adds up. Research shows that students who make learning a habit are more likely to reach their goals. Set time aside to learn and get reminders using your learning scheduler.\n

\n\n

\n\n\n

","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Sizing","type":"text"}]},{"type":"paragraph","content":[{"text":"Setting up a div is kind of like a setting up a view:","type":"text"}]},{"type":"codeBlock","content":[{"text":" #div1 {\n\n width: 100%;\n height: 500px;\n border: 3px solid black;\n background-color: blue;\n }","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"margins","type":"text"}]},{"type":"codeBlock","content":[{"text":"#div1 {\n margin: 10px;\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"or","type":"text"}]},{"type":"codeBlock","content":[{"text":"#div1 {\n margin: 0px 0px 10px 10px;\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"where (top, right, bottom, left).","type":"text"}]},{"type":"paragraph","content":[{"text":"padding is the same.","type":"text"}]},{"type":"paragraph","content":[{"text":"You can set min and max (also note the height property uses vh for viewport height).","type":"text"}]},{"type":"codeBlock","content":[{"text":" #div1 {\n \n width: 70%;\n min-width: 600px;\n max-width: 800px;\n height: 100vh;\n border: 3px solid black;\n background: blue;\n margin: 30px;\n }","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Position","type":"text"}]},{"type":"paragraph","content":[{"text":"If you want the divs to sit side by side you use:","type":"text"}]},{"type":"codeBlock","content":[{"text":"display: inline-block;","type":"text"}]},{"type":"paragraph","content":[{"text":"You can use static/relative/absolute/fixed. Static is on by default. See explanation ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/LI/pages/2008711233"}}]},{"text":".","type":"text"}]},{"type":"codeBlock","content":[{"text":" #div1 {\n \n width: 70%;\n height: 500px;\n position: relative;\n top: 75px;\n left: 100px;\n border: 3px solid black;\n background: blue;\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"It’s recursive, so nested divs will be positioned relative to the origin of their parent.","type":"text"}]},{"type":"paragraph","content":[{"text":"z position is specified with z-index:","type":"text"}]},{"type":"codeBlock","content":[{"text":" #div1 {\n\n width: 500px;\n height: 500px;\n position: absolute;\n top: 50px;\n left: 50px;\n background: blue;\n z-index: 1;\n }","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Making sense of the layout system","type":"text"}]},{"type":"paragraph","content":[{"text":"Float will make the div “float“ in relations to the following divs.","type":"text"}]},{"type":"paragraph","content":[{"text":"Clear will prevent a div from flowing around a a floating div.","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"gliffy","parameters":{"macroParams":{"imageAttachmentId":{"value":"att2008711176"},"macroId":{"value":"57464579-7bea-4068-a7c9-4de87a5d5018"},"baseUrl":{"value":"https://projectbroadway.atlassian.net/wiki"},"name":{"value":"WebsiteProgramming_DivPositioning"},"diagramAttachmentId":{"value":"att2008547350"},"containerId":{"value":"2001633292"},"timestamp":{"value":"1687579313067"}},"macroMetadata":{"macroId":{"value":"fec1f49f-d8f4-4cbc-96c9-44baf51304fc"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"image","data":{"url":"https://confluence-connect.gliffy.net/diagram/image/placeHolder.png?imageAttachmentId=att2008711176¯oId=57464579-7bea-4068-a7c9-4de87a5d5018&baseUrl=https%3A%2F%2Fprojectbroadway.atlassian.net%2Fwiki&name=WebsiteProgramming_DivPositioning&diagramAttachmentId=att2008547350&containerId=2001633292×tamp=1687579313067"}}],"title":"Gliffy Diagram"}},"localId":"cef6dc5f-2263-4d97-b990-d968a11cfa78"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Setting a background image","type":"text"}]},{"type":"paragraph","content":[{"text":"Putting an image as background of a div","type":"text"}]},{"type":"codeBlock","content":[{"text":" #div1 {\n\n width: 100%;\n height: 500px;\n border: 3px solid black;\n background-image: url(bg.jpg);\n background-repeat: repeat-x;\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"Changing opacity on an image and hover selector","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n img {\n opacity: 0.4;\n }\n\n img:hover {\n opacity: 1.0;\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"and ","type":"text"}]},{"type":"codeBlock","content":[{"text":"

","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Making text wrap around an image","type":"text"}]},{"type":"codeBlock","content":[{"text":" img {\n float: right;\n margin: 0 0 10px 10px;\n }","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Styling links","type":"text"}]},{"type":"codeBlock","content":[{"text":"\t\t/* unvisited link */\n\t\ta:link {\n\t\t\tcolor: red;\n\t\t\ttext-decoration: none;\n\t\t\t\n\t\t}\n\n\t\t/* visited link */\n\t\ta:visited {\n\t\t\tcolor: blue;\n\t\t}\n\n\t\t/* mouse over link */\n\t\ta:hover {\n\t\t\tcolor: purple;\n\t\t\ttext-decoration: underline;\n\t\t\tbackground-color: yellow;\n\t\t}\n\n\t\t/* selected link */\n\t\ta:active {\n\t\t\tcolor: blue;\n\t\t}","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"References","type":"text"}]},{"type":"paragraph","content":[{"text":"https://code.visualstudio.com/docs/languages/html","type":"text","marks":[{"type":"link","attrs":{"href":"https://code.visualstudio.com/docs/languages/html"}}]}]},{"type":"paragraph"},{"type":"paragraph"}],"version":1}

Browser not supported