+ HTML & CSS The “why” and “how-to” on basic coding for business students. By Alexandria Eisenhardt

+ About Me Blogger at: Marketing Major Women of Isenberg 2017 Co-Chair

so, what IS coding?! < />

+ Coding is... the use of digital languages or ‘CODE’ to develop apps, websites, and computer software. Basically, coding is the ability to speak several digital languages at once in order to create the things we all use and see everyday! HRESULT hr = MQ_OK; // Return code // Define the maximum number of properties, a property counter, and // an MQQMPROPS structure. const int NUMBEROFPROPERTIES = 1; // Number of computer properties DWORD cPropId=0; // Property counter MQQMPROPS qmprops; QMPROPID aQMPropId[NUMBEROFPROPERTIES]; MQPROPVARIANT aQMPropVar[NUMBEROFPROPERTIES]; HRESULT aQMStatus[NUMBEROFPROPERTIES]; // Specify PROPID_QM_MACHINE_ID. CLSID guidMachineId; // Computer GUID buffer

+ What are the two main languages ? HTML Describes the structure of a webpage CSS (Cascading Style Sheets) CSS describes how HTML elements will be displayed on the screen.body { font-family: sans-serif; color: #55394e; padding: 2px; }.page { Border: 0px; } There are actually more than 500+ coding languages out there!

+ Why should I know this? body {background- color:ffffff;background-repeat:no- repeat;background-position:top left;background-attachment:fixed;} h1{font-family:Cursive;color:000000;} p {font-family:Helvetica;font- size:14px;font-style:normal;font- weight:normal;font-variant:small- caps;color:000000;} why should I learn to code? … well, some of it

+ According to Forbes: Blogging Builds Your Career! “ Today, people not only google companies but also google people who work there. Many a times, googling starts with people’s name before companies. Dorie Clark, in her book Reinventing You, made an evocative case for building personal brands. Personal blogs are a fairly inexpensive gateway – ” herylsnappconner/2016/01/23/ geek-entrepreneur-karthik- rajan-how-blogging-builds- your-career/#53b9ca2ed253

+ Coding & Blogging…? Creating a personal blog as a college student [and more importantly a BUSINESS students] is essentially creating a digital portfolio. If a potential employer were to Google you, and all that came up was a link to your LinkedIn account and your Facebook profile, that doesn’t really tell them a lot about who you really are. A personal blog not only gives you more visual space on Google, but it also allows you to choose what shows up first about you on the internet. Let's Google Me!

+ How much CODING will I really need to learn Personal blogs and websites are almost always (98.99% of the time) hosted on a 3 rd party server. These servers require little to no knowledge of coding to use, BUT having minimal knowledge of code allows you to be more customizable and flexible. It also allows you to know when something is wrong, and how to fix it without having to rely on or pay another 3 rd party. 5 Main Hosting Sites: SquareSpace (mine, and my favorite) Wordpress Blogger Wix Weebly if I want o start a personal website or blog?

let’s learn the basics

HTML

+ HTML Describes the Structure of Pages HTML code is made up of characters that live inside angled brackets <> These brackets are called HTML elements. Elements are made up of 2 tags : and opening tag (<>) and a closing tag( ). A closing tag will always contain a / in it. Ex: this is a paragraph opening paragraph tag closing paragraph tag

+ Main HTML Elements Describes elements shown at the top of the browser, above where you type a URL. is shown within the element. Contains information about the page, rather than information shown within the web browser Everything shown inside the main browser is contained within the body element. This includes the tags Header 1, Header 2, Header 3, Header 4, Header 5, and Header 6, as well as the paragraph tag.

+ How HTML Describes the Structure of Pages This is the Main Heading This is an introduction to the reset of the page. This is a Sub-Heading Subheadings help the reader follow the structure of the page or article they’re reading. Sometimes you may have a sub-sub heading (h3). Another Sub-Heading Here you can see another subheading. This is the Main Heading This is an introduction to the reset of the page. This is a Sub-Heading Subheadings help the reader follow the structure of the page or article they’re reading. Sometimes you may have a sub-sub heading (h3). Another Sub-Heading Here you can see another subheading. what it will look like online what it looks like in HTML code

+ HTML Tips and Tricks Inserting an image is as easy adding an image tag ! To center an item of code all you have to do is wrap it in the tag. Before Image Insert Subheadings help the reader follow the structure of the page or article they’re reading. Sometimes you may have a sub- sub heading (h3). After Image Insert Subheadings help the reader follow the structure of the page or article they’re reading. Sometimes you may have a sub-sub heading (h3). Subheadings help the reader follow the structure of the page or article they’re reading. Sometimes you may have a sub- sub heading (h3).

CSS

+ Understanding CSS Every HTML element has an invisible box surrounding it. creates the first box then every tag following creates boxes within the original box. CSS must be plugged into HTML through the tag if it is not being written on a separate document. CSS allows you to add color to the border of the box, change the background color of the box, change the text within the box, and change the height and width of the box in pixels. This is the Main Heading This is an introduction to the reset of the page. This is a Sub-Heading Subheadings help the reader follow the structure of the page or article they’re reading. Sometimes you may have a sub-sub heading (h3).

+ CSS Associates Style Rules with HTML Elements A CSS Rule contains 2 parts: 1. a selector, and a 2. Declaration Selectors indicate which element the rule applies to; and Declarations indicate how the element referred to should be styled. p { font-family: sans-serif; } selector declaration

+ CSS Properties Affect How Elements Are Displayed Declarations sit in between the { } brackets. Within every declaration is two parts: 1.A property, and 2.A value h1, h2, h3 { font-family: Arial; color: #ffffff; } Property describes the aspect of the element you want to change (i.e. color) Value describes the speficic setting for the chosen element and property.

+ Example of CSS Working with HTML WIB Rocks don’t you guys love WIB? body { font-family: arial; background-color: #A4A3A5 } h1 { color: #ffffff } P { color: # } WIB Rocks don’t you guys love WIB? WEBHTML+CSS

+ Helpful Links if You’re Interested in Learning to Code! Elle & Company Design Code Academy Code.org Codeschool.com