![]() Later, we' ll be using CSS to change colours, sizing, fonts, etc. Right now, we 'll stick to viewing the project with the default HTML styles. # Exercise # 1: Personalize the content ( 15 mins ) ** Images **: like links, also requires an additional attribute, `src`, for linking to the image file and `alt` to provide alternative text for accessibility. ** Link **: requires an `href` * attribute * to specify where to link to. Here are a couple other tags you may choose to add today. You know you're in love when you can't fall asleep because reality is finally better * a source of the quotation may be given using the `` tag * used to indicate that the enclosed text is a quotation * displays in the browser' s tab, search engine results and bookmarks. * found in the `` section of the HTML document Here are some tags already included in your project 's **index.html**. * ** shift + period key ** for the right angled bracket * ** shift + comma key ** for the left angled bracket Note the a forward slash in the closing tag: Tags usually come in pairs - an opening tag and a * closing tag *. Left `` right angled brackets surround the tag name. To display content in the browser, use * tags *. Tags are used to describe the meaning of the content, not what they look like. HTML was created for web browsers to read and interpret the meaning of the content. ![]() What is this extra content that we see in the text editor but not in the browser? It 's HTML! ! ( framework / img / workshop / project - html. * ( double clicking the file will open it in your * default * browser ) * right - click / two - finger tap on ** index. html ** in the sidebar to open it in the editor * the files will appear in the sidebar of the editorġ. * select the ** project ** folder & click ** Open ** * navigate to the ** llc - html - css - valentines - master ** folder ! ( framework / img / workshop / editor - add - project - 1. Go to ** File ** > ** Add Project Folder **. Open the ** project ** folder in the text editor to edit your project. |- slides.html // This is the file you're viewing right now!ġ. |- project // Contains files for your project. |- framework // Contains files for slide presentation. Inside of the folder you downloaded today, ** llc - html - css - valentines - master **, there are a few different folders that contain many files. * () - create your own code snippet shortcuts !(framework/img/workshop/atom-soft-wrap.jpg) Make sure the **Soft Wrap** option is checked. !(framework/img/workshop/atom-settings.jpg) ![]() The **Settings** tab will show by default. !(framework/img/workshop/atom-preferences.jpg) Go to **Preferences** to open the customization options. Today, let's update the text wrapping option in Atom to make it easier to read long blocks of code and text. Having a good text editor and learning how to use it to its full potential will help your work flow. Visit () for more info about modern browsers. * To set Chrome as your default browser, follow (). * keyboard shortcut: **Ctrl + Shift + I** (PC) / **Cmnd + Option + I** (Mac) * select the menu icon in the top right hand corner of the Chrome browser and select **More Tools > Developer Tools** * right-click/ctrl + click on any web page and select **Inspect** ** Developer tools ** allow us to * inspect * any web page to see how it's built. ** Browser: ** Choose a modern web browser like ( https: //that supports current web standards and has good development tools. See the Pen KwyGgY by Ladies Learning Code ( ) on CodePen. Use the left ← and right → arrow keys to navigate Open slides.html in the browser to view the slides Ĭontent created by Christina Truong for Ladies Learning Code Unzip the learner file ( extract all if you’re on a PC) ![]()
0 Comments
Leave a Reply. |