One place for hosting & domains

      Top 10 Security Practices for Protecting Yourself and Your Infrastructure


      How to Join

      This Tech Talk is free and open to everyone. Register on Eventbrite here to receive a link to join on Thursday, October 29, 2020, 11:00 a.m.–12:00 p.m. ET.

      About the Talk

      From firewalls, to user privileges, to access controls — this talk will not only explain the how, but also dive into the why of common security practices.

      What You’ll Learn

      • 10 different tips and tricks for securing your infrastructure

      This Talk is Designed For

      • Everyone! Security is only effective if everyone is aware of the how and why things are done.

      About the Presenter

      Mason Egger (@masonegger) is currently a Developer Advocate at DigitalOcean, specializing in cloud infrastructure, distributed systems, and Python. Prior to his work at DigitalOcean, he was an SRE (Site Reliability Engineer), helping build and maintain a highly available hybrid multi-cloud PaaS. He is an avid programmer, speaker, educator, and writer/blogger. He is a maintainer of the DigitalOcean Terraform provider and contributes to random open source projects here and there. In his spare time, he enjoys reading, camping, kayaking, and exploring new places.

      To join the live Tech Talk, register here.



      Source link

      Creating the Top Section of Your Homepage With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      We will now begin adding content by replicating the top section of the demonstration website.

      Top section of demonstration website

      This top section is composed of a large background image, a small profile image, a text header, a text subheader, and a link. Each of these pieces of content are styled and positioned with HTML.

      In the remaining tutorials of this series, we’ll learn how to use HTML to recreate this content on a new webpage.



      Source link

      How To Add a Background Image to the Top Section of Your Webpage With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      In this tutorial we’ll learn how to use a <div> container to structure the top section of the webpage. We will use the style attribute to specify the height of our <div> container, apply a background image, and specify that the background image should cover the entire area of the <div> container.

      Before we get started, we’ll need a background image. You may download and use our demonstration site’s background image for the purpose of the tutorial, or you can choose a new image. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series).

      Once you’ve chosen your background image, save the image in your images folder as background-image.jpg.

      Next, paste the highlighted code snippet into your index.html file below the opening <body> tag and above the closing </body>:

      . . .
      <body>
      <!--First section-->
      <div style="background-image: url('Image_Location'); background-size: cover;; height:540px;
      </div>
      </body>
      </html>
      

      Make sure to switch the text that says Image_Location with the file path of your image and don’t forget to add the closing </div> tag.

      Note that we have added the comment <!--First section--> to help organize our HTML code. A comment is a piece of code that is ignored by the browser. Comments are used to help explain or organize code to developers. They are created with the opening tag <!-- and the closing tag -->.

      Save the file and reload it in the browser. You should receive something like this:

      Background image in top section

      Alternately, you can use a background color instead of a background image. To use a background color, replace the <div> element code snippet you just created with the following highlighted <div> element code snippet like this:

      ...
      <body>
       <div style="background-color: #f4bc01; height:540px;"> 
      </div>
      </body>
      </html>
      

      Save the file and reload it in the browser to check your results. The background image should now be replaced with a container that is the same size but has a solid yellow color.

      If you compare the <div> container on your site with the same <div> container on the demonstration site, you may notice that your webpage’s <div> container is surrounded by a small margin of white space. This margin is due to the fact that all HTML pages are automatically set to have a small margin by default.

      To remove this margin, we need to add a style attribute to the opening <body> tag that sets the margin of the <body> element of the HTML page to 0 pixels. Locate the opening <body> in your index.html file and modify it with the highlighted code:

      <body style=“margin:0;”>

      Save and reload the file in your browser. There should now be no white margin surrounding the top <div> container.

      You should now know how to add a <div> container with a background image to structure the top section of a webpage.



      Source link